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 BetaAurora以确切了解它何时修复。

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