Scale svg group without changing position

Question

I would like to increase group of elements size when hover it.

I have used transform: scale() CSS property but when I hover object is moving from it's original position

p {
  font-family: Lato;
}

#stops>g:hover  {
        transform: scale(14);

    cursor: pointer;

}

Expected behaviour

I would like to increase text size and station circle ( and fill it ) without changing their position.

It could be done with css, but if I could have recommendation of libraries because I would make animations on the subway line ( trains circulations ) that would be great

enxaneta · Accepted Answer

In the next demo I'm removing the transformation from the text and I'm adding x and y attributes. The transformation happens when you mouse over the circle. In order to transform the text as well I'm using this selector: #stops g circle:hover + text

Alternatively instead of transformation for the text you could have changed the font size.

text{
  font-family: Lato;
  font-size:16px;
}

#stops g circle:hover  {
    transform: scale(2);
    transform-origin: 50% 50%;
    transform-box: fill-box;
    cursor: pointer;
}

#stops g circle:hover + text{
    transform: scale(2);
    transform-origin: 0% 50%;
    transform-box: fill-box;
    cursor: pointer;
    pointer-events:none;
}

The OP is commenting that

The hover should be on g g:hover not g circle:hover

In this case I'm adding a rectangle to the g element. The rectangle is as big as the g's bounding box. Everything in the g element except the rect has pointer-events:none. The transformation happens around the center of the circle.

text{
  font-family: Lato;
  font-size:16px;
}
g * {pointer-events:none;}
g rect{pointer-events:all;}
#stops g{transform: scale(1);}
#stops g:hover {
    transform: scale(2);
    transform-origin: 129.24px 149.78px;
    cursor: pointer;
}

In order to calculate the 's bounding box you can use javascript and the method getBBox().

In order to better understand what happens please add a fill to the

You can keep the text transformation if this is what you want.

UPDATE 2

the OP is commenting:

Can you make an example with three dots please ?

Next comes the example. In this case I'm using Javascript to set the size of the rects and the value for the transform-origin of every group. If you need only the markup you can copy it from the inspector. Since the OP commented that they would like to keep the text transformation in this example the text keeps the transformation instead of the x and y attributes.

let stops = document.querySelector("#stops");
// all the g elements in the stops 
let gs = stops.querySelectorAll("g");

// for each g in the gs
gs.forEach(g=>{
  // the rectangle in this g element
  let thisRect = g.querySelector("rect");
  // the circle in this g element
  let thisCircle = g.querySelector("circle");
  // the coords of the circle's center used for the transform-origin
  let x = thisCircle.getAttribute("cx");
  let y = thisCircle.getAttribute("cy");
  // the bounding box of the group
  let bb = g.getBBox();
  // set the rect's attributes
  thisRect.setAttributeNS(null, "x", bb.x);
  thisRect.setAttributeNS(null, "y", bb.y);
  thisRect.setAttributeNS(null, "width", bb.width);
  thisRect.setAttributeNS(null, "height", bb.height);
  
  // set the value for the transform-origin for this group
  g.style.transformOrigin =  `${x}px ${y}px`;
  
})

text{
  font-family: Lato;
  font-size:16px;
}
g * {pointer-events:none;}
g rect{pointer-events:all;}
#stops g{transform: scale(1);cursor: pointer;}
#stops g:hover {
    transform: scale(2); 
}

Scale svg group without changing position

Answers (1)

UPDATE 2

Related Questions