Question

我正在尝试在CSS悬停时缩放SVG（地图上的点），以使大小增加，但位置保持不变。我尝试了所有可以在线找到的技巧，设置转换中心没有任何作用，这些点只是在屏幕上飞舞（显然，它们的x，y位置也在缩放中）。我试过设置scaleX（0）！important和scaleY（0）！important等，并尝试从代码等中提取实现我想要的功能的代码，但是scale仍然不起作用-有时点移动了进行更改，但它不仅会停留在同一位置并增加大小。即使有了在有关同一主题的其他回答问题上找到的解决方案，这些要点仍然可以解决。

整个文件很大，因此这里是一个链接：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，所以我确定这很简单，而且我受过的教育不足以发现问题。

Answer 1

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

在this JS fiddle中实时查看（根据您的情况）。

相关参考文献可以在here和here中找到。

缩放SVG而不移动

1 个答案: