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-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代码：

com.mycompany:library:0.0.1@aar

悬停时，SVG元素会更改位置

3 个答案: