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

【问题标题】：Scaling SVG rect on hover using CSS transform使用 CSS 变换在悬停时缩放 SVG 矩形
【发布时间】：2012-10-22 03:19:01
【问题描述】：

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

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

如何使rect 的行为与p 完全相同并正确缩放？

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

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

感谢您的帮助。

【问题讨论】：

标签： css svg hover transform

【解决方案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>

It works 在 Firefox trunk 中，但似乎不适用于 Firefox 16。我还没有测试 Firefox Beta 或 Aurora 以查看它何时修复。

【讨论】：

谢谢，缩放确实看起来是一样的。但是，rect 在悬停后不会收回其初始比例。
他们确实在 Windows 7 上使用 Firefox 主干为我收回了原来的规模。
没错，我想它还没有完全兼容。谢谢！
能否在 svg 框上添加平滑过渡效果。
@dharendrabisht 您应该将其作为一个单独的问题提出。