CODEWITHSUNDEEP
svgpathcoordinatespoint
Reginna
Reginna

Reputation: 341

How to get intersection point(x,y) on SVG path

I have the SVG path, and I want to get point's y coordinate.

enter image description here enter image description here

SVG line:

<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>

I try this answer code, but it doesn't fit my need. I think path.getTotalLength() is not great for my question.

How can I do?

Update:

What my project want to do: JSFiddle

I have no idea how red points can match the line for each device size.

Upvotes: 2

Views: 1900

Answers (1)

owengall
owengall

Reputation: 463

I suggest that you try paperjs. It’s a JS graphics library that uses HTML <canvas> elements as its graphics context(s). Here’s an example using your curve and a vertical line at mouse.x, which intersections shown.

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>

Upvotes: 3

Related Questions