使用CSS变换悬停时缩放SVG矩形

Question

将悬停在HTML或SVG元素上的CSS变换应用到同一个CSS转换似乎不会产生相同的效果。正如你在下面的小提琴中看到的那样，p和rect在缩放时行为不一样，这正是我的问题。

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

我怎么能做出rect行为完全为p和规模是否正确？

我试着用矩阵缩放rect - 考虑到原点 - 但它似乎也没有工作，或者我做错了。

我想在这里坚持CSS解决方案，但JS的也可能是一个选项。

感谢您的帮助。

Answer 1

这似乎是正确的。

<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> 

在Firefox trunkIt works但似乎并没有与Firefox 16.我没有测试过的Firefox Beta或Aurora在什么时候它是固定的，看工作。