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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -