时间戳

首页 > 解决方案 > 无需移动即可缩放 SVG

html - 无需移动即可缩放 SVG

问题描述

我正在尝试在悬停时在 CSS 中缩放 SVG（地图上的点），以便尺寸增加但位置保持不变。我已经尝试了所有可以在网上找到的技巧——设置变换中心没有任何作用，这些点只是在屏幕上飞来飞去（显然它们的 x、y 位置也在缩放）。我已经尝试设置 scaleX(0) !important 和 scaleY(0) !important 等，并尝试从教程等中提取我想要的代码，但比例仍然不起作用 - 有时点在哪里移动变化，但它不会只是停留在同一个地方并增加大小。即使我在同一主题的其他已回答问题上找到了解决方案，但要点仍然存在。

整个文件很大，所以这里有一个链接：http: //jsfiddle.net/gw5rmb1t/1/

HTML 中内联 SVG 的相关部分如下所示。

<circle class="dot"
                            id= "A"
                          cx="305" cy="190" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "B"
                      cx="625" cy="295" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "C"
                          cx="615" cy="300" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "D"
                          cx="580" cy="325" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "E"
                          cx="500" cy="275" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "F"
                          cx="460" cy="380" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />
                    <circle class="dot"
                            id= "G"
                          cx="450" cy="350" r=".25%" stroke="#C62828" fill="#C62828" stroke-width="1" />

CSS：

我现在没有为 transform-center 或任何东西定义任何东西，因为它不起作用。非常感谢您的帮助。我像昨天一样刚开始学习 HTML，所以我确信这很简单，我只是没有受过足够的教育来发现这个问题。

标签： htmlcsssvgscale

解决方案

您的 CSS 缺少选择器的以下属性.dot:hover：

transform-box:    fill-box;  // Reference is the object bounding box (of the dot)
transform-origin: center;    // Transform origin is the center of the dot.

在这个 JS 小提琴中看到它（基于你的）。

相关参考资料可在此处和此处找到。

推荐阅读