如何在SVG路径上获取交点（x，y）答案

【问题标题】：How to get intersection point(x,y) on SVG path如何在SVG路径上获取交点（x，y）
【发布时间】：2020-08-12 07:47:21
【问题描述】：

我有 SVG 路径，我想获取点的 y 坐标。

SVG 线：

<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="340" viewBox="0 0 1920 340">
  <path clip-rule="evenodd" fill="none" stroke="#B3B3B3" stroke-miterlimit="10" d="M-.5 60.3c88.8-42 232.2-89.1 355.2-34.4C549.3 112.5 640.3 163 720.3 192.4c80 29.4 278.9 116.9 451.3 61.4 172.3-55.4 328-112.5 568.3-23.2 100.1 43 151.4 65.8 179.6 79.3"/>
</svg>

我尝试this answer code，但它不符合我的需要。我认为path.getTotalLength() 不适合我的问题。

我该怎么办？

更新：

我的项目想要做什么：JSFiddle

我不知道红点如何匹配每个设备尺寸的线。

【问题讨论】：

我建议您向我们展示您编写的代码，以尝试按照您找到的答案来实现事物，然后准确描述它为什么不起作用，即它做了什么和你想让它做什么呢。
好吧，我失败了。我更新了我的描述。

标签： svg path coordinates point

【解决方案1】：

我建议你试试paperjs。这是一个使用 HTML <canvas> 元素作为其图形上下文的 JS 图形库。这是一个使用您的曲线和mouse.x 处的垂直线的示例，其中显示了交叉点。

let wave_path
let bounds

window.onload = function() {
  //paper is a library for working with canvases; it's like a graphics library that works with a canvas
  //as its GUI window. Each canvas context is its own PaperScope, and the global paper variable is a reference
  //to the currently active PaperScope.
  paper.setup(document.getElementById('paper-canvas'))

  //import wave svg. however, if you integrate paperjs into your page, you might as well draw the curve directly onto the
  //canvas with paper, rather than creating an invisible svg element that you then import.
  let wave_svg = paper.project.importSVG(document.getElementById('svg-wave'))
  wave_svg.visible = true // Turn off the effect of display:none

  //fit wave into paper canvas
  bounds = paper.view.bounds
  wave_svg.fitBounds(bounds)

  wave_path = wave_svg.children[0] //get contained path
  wave_path.strokeColor = 'black'
  wave_path.fillColor = null

  //set event handlers on paper canvas
  paper.view.onMouseMove = mouse_move
}

function mouse_move(event) {
  let mouse_location = event.point

  //clear canvas before redrawing
  paper.project.clear()

  //when creating a graphical object with paper, it automatically gets drawn to the canvas at the end of an event handler

  //draw vertical line to intersect with
  let line = new paper.Path(new paper.Point(mouse_location.x, 0), new paper.Point(mouse_location.x, bounds.height))
  line.strokeColor = 'black'

  //redraw wave path
  new paper.Layer(wave_path)

  //draw intersections
  let intersections = line.getIntersections(wave_path)
  for (intersection of intersections) {
    let circle = new paper.Path.Circle(intersection.point, 5)
    circle.strokeColor = 'red'
    circle.fillColor = 'white'
  }
}

<!DOCTYPE html>
<html>
	<head>
		<title>SVG Intersection Demo</title>
		
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-core.min.js"></script>
	</head>
	<body>
		<svg id="svg-wave" style="display:none;" xmlns="http://www.w3.org/2000/svg" width="1920" height="340">
		  <path clip-rule="evenodd" fill="none" stroke="#B3B3B3" stroke-miterlimit="10" d="M-.5 60.3c88.8-42 232.2-89.1 355.2-34.4C549.3 112.5 640.3 163 720.3 192.4c80 29.4 278.9 116.9 451.3 61.4 172.3-55.4 328-112.5 568.3-23.2 100.1 43 151.4 65.8 179.6 79.3"/>
		</svg>
		<div style="text-align:center;">
			<canvas id="paper-canvas" style="width:80%;"></canvas>
		</div>
	</body>
</html>

【讨论】：