1

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

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

我怎样才能使rect行为完全符合p并正确缩放？

我尝试rect使用矩阵缩放 - 考虑到原点 - 但它似乎也不起作用，或者我做错了。

我想在这里坚持使用 CSS 解决方案，但 JS 解决方案也可能是一种选择。

谢谢你的帮助。

4

1 回答 1

2

这似乎是对的。

<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主干，但似乎不适用于 Firefox 16。我尚未测试 Firefox Beta或Aurora以确切了解它何时修复。

于 2012-11-01T14:31:45.750 回答