css - CSS3 Rotate Path within SVG Transform Origin / Firefox Issue -
i'm having issue firefox (43.04) , transform origin rotation of path within svg element.
instead of using origin of targeted rect, it's using center origin of entire svg itself. no problems in webkit browsers.
any suggestions?
https://jsfiddle.net/tj86lz9g/
html
<a> <svg x="0px" y="0px" viewbox="0 0 100 40"> <rect class="square" x="0" y="0" width="10" height="10"/> <rect class="rectangle" x="20" y="0" width="30" height="10"/> </svg> </a> css
rect { fill:#ff0000; } rect.square { transition: transform .8s ease-in-out; transform-origin:center center; } a:hover rect.square { transform:rotate(360deg); }
Comments
Post a Comment