正文 

当前位置： 首页 > 问答 >

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

     2023-05-08     281

关键词：

【中文标题】使用 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 您应该将其作为一个单独的问题提出。

鼠标离开 svg 元素时未删除悬停变换，仅限 Safari

】鼠标离开svg元素时未删除悬停变换，仅限Safari【英文标题】：Hovertransformnotremovedwhenmouseleavessvgelement,Safarionly【发布时间】：2021-11-0715:13:53【问题描述】：我有一段最少的代码，当将鼠标悬停在矩形上时，它应该会导致它发生变... 查看详情

svg子元素上的CSS变换原点问题

...sform-origin的问题。在尝试缩放较大svg中的框的动画时，它使用整个svg的变换原点(0,0)，而不是我尝试缩放的元素的中心。这使它看起来像是“从左上角飞入”，这不是我想要的。我希望让它从元素中心缩放。如 查看详情

使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放

】使用CSS或AngularJS的SVG路径元素悬停缩放【英文标题】：SVGPathelementhoverzoomusingCSSorAngularJS【发布时间】：2015-12-1707:18:22【问题描述】：我正在尝试使用CSS放大svg图像的路径元素。但结果很奇怪，因为元素正在放大，但也改变了它... 查看详情

如何使用css在鼠标悬停时缩放图像？

...，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使... 查看详情

使用变换时，悬停时的 CSS 动画停留在最后一个关键帧：旋转

】使用变换时，悬停时的CSS动画停留在最后一个关键帧：旋转【英文标题】：CSSanimationonhoverstayatlastkeyframewhenusingtransform:rotate【发布时间】：2014-10-2500:37:39【问题描述】：我试图让此动画在悬停时停留在其最后一个关键帧，但它... 查看详情

SVG 矩形在鼠标悬停时显示 HTML 标题

...】：我尝试在鼠标悬停矩形时显示工具提示。我的尝试是使用&lt;g&gt;并为其设置title并将title设置为&lt;rect&gt;本身，但不会产生任何可见的输出（在Chrome上）。HTML<svg> 查看详情

如何将鼠标悬停在 SVG 矩形上？

...在所有浏览器中都是一致的，所以它可能与SVG代码有关。使用onmouseove 查看详情

理解svg坐标系统和变换：transform属性(代码片段)

...素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSStransform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道... 查看详情

为啥在 webkit 浏览器下缩放 SVG 会变得模糊？

...变得模糊？【发布时间】：2014-12-1805:35:42【问题描述】：使用CSS缩放变换缩放SVG图像时，图像在Chrome或Safari下变得模糊？这是我的一些代码：#logoanimation:cssAnimation120si 查看详情

悬停时的 CSS 变换和框阴影

...owonhover【发布时间】：2021-07-1318:39:02【问题描述】：我有使用材质UI的卡片组件。卡片在悬停时变形，卡片上也应该出现阴影。但是当我把box-shadow阴影出现在变形前的盒子上时，变形后的卡片和阴影之间有空白。我该如何解决这... 查看详情

鼠标悬停时的SVG工具提示？

...描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不同。到目前为止，根本没有JS代码。现在我想在鼠标悬停在某个区域上时创建一个带有文本（工具提... 查看详情

以光标位置为变换原点缩放 SVG

...【发布时间】：2022-01-1100:39:52【问题描述】：我正在尝试使用触控板（通过向上/向下移动两根手指）缩放SVG圆，并且变换的原点必须是光标的位置。缩放第一次表现良好，并且对于每一次其他尝试，圆圈都会改变位置（它不应... 查看详情

将 css 悬停在 svg 上

...【发布时间】：2016-03-2511:14:22【问题描述】：我正在尝试使用svg制作悬停效果。This是我想要达到的效果。当我在两条路径和文本上进行鼠标悬停时，我希望其他路径和文本具有较低的不透明度（我做了这部分），但我也希望出... 查看详情

悬停按钮时如何更改svg颜色

...描述】：我正在尝试在按钮悬停时更改SVG的颜色。我尝试使用button:hover+svg，但这似乎不起作用。当我运行CSS时，SVG填充为白色，当我将鼠标悬停在按钮上时它不起作用。我看到它工作的唯一方法是，如果我不将初始填充设置为... 查看详情

在悬停另一个元素时更改 SVG 填充颜色

...间，关于如何在悬停时更改svg填充颜色。我已经能够通过使用对象标记并链接到我的CSS文件来使其工作，以便我可以在外部设置它的样式。但是，当我实际将鼠标悬停在SVG本身上时，我只能让它工作。我在一个标签中有我的对象... 查看详情

Firefox 浏览器中的 SVG 路径元素缩放转换错误

...2020-06-1803:13:58【问题描述】：我正在尝试通过在其上添加变换比例过渡来在悬停时为svg路径元素设置动画。它在chrome上按预期完美运行，但在Firefox上它会中断过渡。注意：它可以在没有过渡动画的情况下工作，但在这个用例中... 查看详情

在 CSS 中悬停时更改 img src SVG [重复]

】在CSS中悬停时更改imgsrcSVG[重复]【英文标题】：ChangeimgsrcSVGonhoverinCSS[duplicate]【发布时间】：2020-12-2012:31:46【问题描述】：html:&lt;imgsrc="logo.svg"alt="Logo"class="logo-img"&gt;css:.logo-imgpath:hoverfi 查看详情

SVG CSS 悬停样式

...erStyling【发布时间】：2017-04-0307:54:17【问题描述】：尝试使用CSS对该多色HTML图像的SVG进行样式化，以使5的右侧在悬停时为白色。bodybackground-color:gray;svgheight:50vh;fill:white;.html5g.st2.st0fill:transparent;.html5:hoverpath.st0fill:#e 查看详情