Question

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

如何使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 It works中的

trunk但似乎无法与Firefox 16一起使用。我还没有测试过Firefox Beta或Aurora，以确定它何时修复

使用CSS转换在悬停时缩放SVG rect

1 个答案: