Html 无需移动即可缩放SVG

我试图在悬停时缩放CSS中的SVG（地图上的点），这样大小会增加，但位置保持不变。我已经尝试了所有我能在网上找到的技巧——设置transform center没有任何作用，点只是在屏幕上飞过（很明显，它们的x，y位置也在缩放）。我已尝试设置scaleX（0）！重要的和scaleY（0）！重要信息，等等，并尝试从教程中提取我想要的代码，等等，但缩放仍然不起作用-有时点会移动以进行更改，但它不会停留在同一位置并增大大小。即使我在同一主题的其他回答问题上找到了解决方案，要点仍然在移动

整个文件非常庞大，因此这里有一个链接：

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，所以我确信这很简单，我只是没有受过足够的教育来发现问题。

您的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.

看它活在（基于你的）

---

可以找到相关参考。

我不确定您所说的变换中心是什么意思。…AFAIK没有这样的属性。这里有变换原点…这就是你的意思吗？…但是为什么不改变半径呢？保利丁：是的，我是说变换中心。我试着改变半径，但什么都没发生。非常感谢！我想我在任何地方都没有看到这个建议，我从来都不知道该怎么做。