Элемент SVG меняет положение при наведении

Question

Я хотел бы изменить масштаб элемента SVG при наведении на него курсора.

Моя настоящая проблема заключается в том, что при наведении курсора на элемент он масштабируется, но меняет положение.

Я пытался сгруппировать путьвнутри элемента g, но это также не работает.

Как можно масштабировать элемент path или g без изменения положения?

let svg= document.getElementsByTagName('svg')[0]
let newpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let newpath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
let trainsPathallg = document.createElementNS('http://www.w3.org/2000/svg', 'g');
trainsPathallg.setAttribute('id','trainsPath')
let newpathg = document.createElementNS('http://www.w3.org/2000/svg', 'g');

newpath.setAttribute('d', 'M0,-10 V10 L10,0 Z');
newpath2.setAttribute('d', 'M0,0 L10,-10 V10 Z');

let progress=50;
let progress2= 300
let progress3= 400
let position = document.getElementById('s3')
let pt1 = position.getPointAtLength(progress);
let pt2 = position.getPointAtLength(progress + 0.1);

let a = (Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x) * 180) / Math.PI;

newpath.setAttribute('transform', `translate(${pt1.x},${pt1.y})rotate(${a})`);


svg.appendChild(trainsPathallg)
trainsPathallg.appendChild(newpathg)
newpathg.appendChild(newpath);

#trainsPath > g:hover {
  transform: scale(1.5);
  //transform-origin: 50% 50%;
}

<svg viewBox = "0 0 800 300" version = "1.1">
    <path id = "s3" d = "M10.51,27.68c202.42,340.08,200.57-4.6,300,15.67" fill = "none"  stroke = "green" stroke-width = "3"/>
</svg>

Answer 1

Вы можете попробовать transform-origin с помощью transform-box: fill-box; & animation.

let svg = document.getElementsByTagName('svg')[0]
let newpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let newpath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
let trainsPathallg = document.createElementNS('http://www.w3.org/2000/svg', 'g');
trainsPathallg.setAttribute('id', 'trainsPath')
let newpathg = document.createElementNS('http://www.w3.org/2000/svg', 'g');

newpath.setAttribute('d', 'M0,-10 V10 L10,0 Z');
newpath2.setAttribute('d', 'M0,0 L10,-10 V10 Z');

let progress = 50;
let progress2 = 300
let progress3 = 400
let position = document.getElementById('s3')
let pt1 = position.getPointAtLength(progress);
let pt2 = position.getPointAtLength(progress + 0.1);

let a = (Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x) * 180) / Math.PI;

newpath.setAttribute('transform', `translate(${pt1.x},${pt1.y})rotate(${a})`);


svg.appendChild(trainsPathallg)
trainsPathallg.appendChild(newpathg)
newpathg.appendChild(newpath);

#trainsPath>g:hover {
  transform: scale(1.5);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

#trainsPath g {
  transition: transform .2s;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

<svg viewBox="0 0 800 300" version="1.1">
    <path id = "s3" d = "M10.51,27.68c202.42,340.08,200.57-4.6,300,15.67" fill = "none"  stroke = "green" stroke-width = "3"/>
</svg>

Answer 2

Похоже, вы хотите transform-origin и transform-box.

let svg= document.getElementsByTagName('svg')[0]
let newpath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let newpath2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
let trainsPathallg = document.createElementNS('http://www.w3.org/2000/svg', 'g');
trainsPathallg.setAttribute('id','trainsPath')
let newpathg = document.createElementNS('http://www.w3.org/2000/svg', 'g');

newpath.setAttribute('d', 'M0,-10 V10 L10,0 Z');
newpath2.setAttribute('d', 'M0,0 L10,-10 V10 Z');

let progress=50;
let progress2= 300
let progress3= 400
let position = document.getElementById('s3')
let pt1 = position.getPointAtLength(progress);
let pt2 = position.getPointAtLength(progress + 0.1);

let a = (Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x) * 180) / Math.PI;

newpath.setAttribute('transform', `translate(${pt1.x},${pt1.y})rotate(${a})`);


svg.appendChild(trainsPathallg)
trainsPathallg.appendChild(newpathg)
newpathg.appendChild(newpath);

#trainsPath > g:hover {
  transform: scale(1.5);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

<svg viewBox = "0 0 800 300" version = "1.1">
   <path id = "s3" d = "M10.51,27.68c202.42,340.08,200.57-4.6,300,15.67" fill = "none"  stroke = "green" stroke-width = "3"/>
</svg>

Answer 3

Просто добавьте этот код CSS:

<style>
    transform: scale(1.5);
    transform-origin: 50% 50%;
    transform-box: fill-box;
</style>