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

Posted 2023-05-08

【中文标题】使用 CSS 变换在悬停时缩放 SVG 矩形

【英文标题】：Scaling SVG rect on hover using CSS transform

【发布时间】：2012-10-22 03:19:01

【问题描述】：

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

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

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

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

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

感谢您的帮助。

【参考方案1】：

这似乎是对的。

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

<svg>
    <g transform="translate(20, 40)">
    <rect x="-20" y="-40"  />
    <g transform="translate(55, 0)" >
    <rect x="-20" y="-40"  />
    </g>
    <g transform="translate(110, 0)" >
    <rect x="-20" y="-40"  />
    </g>
    <g transform="translate(165, 0)" >
    <rect x="-20" y="-40"  />
    </g>
    </g>
</svg>

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

【讨论】：

谢谢，缩放确实看起来是一样的。但是，rect 在悬停后不会收回其初始比例。

他们确实在 Windows 7 上使用 Firefox 主干为我收回了原来的规模。

没错，我想它还没有完全兼容。谢谢！

能否在 svg 框上添加平滑过渡效果。

@dharendrabisht 您应该将其作为一个单独的问题提出。