似乎在悬停时对 HTML 或 SVG 元素应用相同的 CSS 变换不会产生相同的效果。正如您在下面的小提琴中看到的那样,p
andrect
在缩放时的行为方式不同,这正是我的问题。
我怎样才能使rect
行为完全符合p
并正确缩放?
我尝试rect
使用矩阵缩放 - 考虑到原点 - 但它似乎也不起作用,或者我做错了。
我想在这里坚持使用 CSS 解决方案,但 JS 解决方案也可能是一种选择。
谢谢你的帮助。
似乎在悬停时对 HTML 或 SVG 元素应用相同的 CSS 变换不会产生相同的效果。正如您在下面的小提琴中看到的那样,p
andrect
在缩放时的行为方式不同,这正是我的问题。
我怎样才能使rect
行为完全符合p
并正确缩放?
我尝试rect
使用矩阵缩放 - 考虑到原点 - 但它似乎也不起作用,或者我做错了。
我想在这里坚持使用 CSS 解决方案,但 JS 解决方案也可能是一种选择。
谢谢你的帮助。
这似乎是对的。
<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以确切了解它何时修复。