Question

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.

Answer 1

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.