Svg 元素在懸停時更改 position

Question

我想在我 hover 時更改 svg 元素比例。

我的實際問題是當我 hover 元素時，它會縮放但會改變 position。

我試圖將我的路徑分組到一個g元素中，但這也不起作用。

如何在不更改 position 的情況下縮放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-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

看起來你想要變換原點和變換框。

 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>