Get point's y coordinate on svg path

微笑、不失礼 提交于 2020-08-01 08:59:25

问题


I guess I need to add some explanation, that I want to ask this question, because too short question doesn't quality standards... funny...

So, here is the question: How I can get the 'y' coordinate of the point on svg path at a specific 'x' coordinate?


回答1:


Well this is not straightforward, because a path could have multiple points with the specified x coordinate.

There is no built-in function in the SVG DOM to do this. One solution is to step along the path segments and do the maths yourself.

Alternatively, there is a built in function on SVGPathElement called getPointAtLength(len). You pass in a length along the path and it will return the x,y coords at that point. You could step along the path length and work out where the x coordinate crosses your desired x. You can get the path length from the SVGPathElement.getTotalLength() function. It's a bit of a kludge and you have to be careful you don't miss points where the curve bends near your x. But it should work.

See here for more information on these functions.




回答2:


I was working on a similar problem and Paul's answer really helped me.

Just to further illustrate @Paul LeBeau's answer, here is a little demo:

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>



回答3:


If you know all the points of your path, I believe a more performant solution than stepping through the path might be to search the d attribute of your path for the specific x coordinate you are looking for. Then capture the y coordinate using regexp. The regexp could be used like so:

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


来源:https://stackoverflow.com/questions/22633718/get-points-y-coordinate-on-svg-path

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!