Search code examples
htmlcsssvgscale

Scaling SVG without movement

I'm trying to scale an SVG (points on a map) in CSS on hover so that the size increases but the location stays the same. I've tried all the tips I can find online- setting transform-center doesn't do anything, the points just go flying across the screen (clearly their x,y location is also being scaled). I've tried setting scaleX(0) !important and scaleY(0) !important, etc, and tried pulling code that does what I want off of tutorials, etc, but the scale still won't work- sometimes where the dot moves to changes, but it won't just stay in the same place and increase in size. Even with solutions I've found on other answered questions on this same topic, the points still move.

The whole file is huge, so here's a link: http://jsfiddle.net/gw5rmb1t/1/

The relevant part of the inline SVG in the HTML is below. 

<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:

I don't have anything defined for transform-center or anything right now, because it's not working. Thanks so much for any help. I just started learning HTML like yesterday so I'm sure this is something simple and I'm just not educated enough to spot the issue.

Solution

  • Your CSS lacks the following properties for the .dot:hover selector:

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

    See it live in this JS fiddle (based on yours).

    The pertinent reference can be found here and here.