Question

我想我需要补充一些解释，我想问这个问题，因为太短的问题没有质量标准......好笑......

所以，这是一个问题：我怎么能得到这样的＆＃39; y＆＃39;特定＆＃39; s＆＃39; svg路径上的点的坐标坐标？

Answer 1

这不是直截了当的，因为路径可能有多个具有指定x坐标的点。

SVG DOM中没有内置函数来执行此操作。一种解决方案是沿着路径段走，自己做数学。

或者，SVGPathElement上有一个名为getPointAtLength(len)的内置函数。沿路径传入一段长度，它将返回该点的x，y坐标。您可以沿着路径长度走一步，找出x坐标穿过所需x的位置。您可以从SVGPathElement.getTotalLength()函数获取路径长度。它有点像kludge，你必须要小心你不要错过曲线在x附近弯曲的点。但它应该有用。

See here for more information on these functions.

Answer 2

我正在研究类似的问题，而保罗的回答确实帮助了我。

只是为了进一步说明@Paul LeBeau的答案，这是一个小演示：

let path = document.getElementById("path");
let svg = document.getElementById("svg");

// The first important function getTotalLength
let totalLength = path.getTotalLength();
let intersections = 27;

for(var i = 0; i <= intersections; i ++){
  let distance = i * 1/intersections * totalLength;
  
  // The second important function getPointAtLength
  let point = path.getPointAtLength(distance);
  addCircleToSVG(point.x, point.y);
  addTextToSVG(point.x, point.y);
}

function addCircleToSVG(x, y){
  let circle = document.createElementNS("http://www.w3.org/2000/svg",'circle');
  circle.setAttribute("cx", x);
  circle.setAttribute("cy", y);
  circle.setAttribute("r", "5");
  circle.setAttribute("fill", "#8888ff");
  svg.appendChild(circle);
}

function addTextToSVG(x, y){
  let text = document.createElementNS("http://www.w3.org/2000/svg",'text');
  text.setAttribute("x", x + 10);
  text.setAttribute("y", y);
  text.setAttribute("fill", "orange");
  text.innerHTML = Math.round(y);
  svg.appendChild(text);
}

svg{
  width:auto;
  height: auto;
}

<svg id="svg" viewBox="0 0 1184.25 455.99">
  <path id="path" class="st0" d="M0.18,455.53c0,0,73-311,128-311s86,276,122,287s52-22,112-25s114,16,146,18s34,20,64,16s45-144,93-133
	s55-21,88-17s58,151,85,149s103-13,128-8s48-21,85-19c37,2,133,43,133,43" fill="#666666"/>
</svg>

Answer 3

如果您知道路径的所有点，那么我相信比逐步浏览路径更有效的解决方案可能是在路径的d属性中搜索所需的特定x坐标。然后使用regexp捕获y坐标。 regexp可以这样使用：

const regex = new RegExp(`${x} ((\d*.\d*))`)
const match = regex.exec(d)

在svg路径上获取点的y坐标

3 个答案: