CODEWITHSUNDEEP
csssvghovertransform
morgi
morgi

Reputation: 1025

Scaling SVG rect on hover using CSS transform

It seems that applying the same CSS transform on hover to an HTML or SVG element does not create the same effect. As you can see in the following fiddle, the p and rect do not behave the same way while scaling, and that is precisely my problem.

http://jsfiddle.net/rKD7T/2/

How could I make the rect behave exactly as the p and scale properly?

I tried scaling the rect with a matrix - taking into account the origin point - but it did not seem to work either, or I did it wrong.

I'd like to stick to CSS solutions here but JS ones might also be an option.

Thanks for your help.

Upvotes: 1

Views: 3516

Answers (1)

Robert Longson
Robert Longson

Reputation: 123995

This seems about right.

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<svg>
    <g transform="translate(20, 40)">
    <rect x="-20" y="-40" width="50" height="100"/>
    <g transform="translate(55, 0)" >
    <rect x="-20" y="-40" width="50" height="100"/>
    </g>
    <g transform="translate(110, 0)" >
    <rect x="-20" y="-40" width="50" height="100"/>
    </g>
    <g transform="translate(165, 0)" >
    <rect x="-20" y="-40" width="50" height="100"/>
    </g>
    </g>
</svg>

It works in Firefox trunk but doesn't seem to work with Firefox 16. I haven't tested Firefox Beta or Aurora to see in exactly when it's fixed.

Upvotes: 2

Related Questions