title: How to get intersection point(x,y) on SVG path
body: <p>I have the SVG path, and I want to get point's y coordinate.</p>
  
  <p><a href="https://i.stack.imgur.com/QSjsx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QSjsx.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/dclUG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dclUG.jpg" alt="enter image description here"></a></p>
  
  <p>SVG line:</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" width="1920" height="340" viewBox="0 0 1920 340"&gt;
    &lt;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"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I try <a href="https://stackoverflow.com/a/53725183/11240898">this answer code</a>, but it doesn't fit my need. I think <code>path.getTotalLength()</code> is not great for my question.</p>
  
  <p>How can I do?</p>
  
  <hr>
  
  <p>Update:</p>
  
  <p>What my project want to do: <a href="https://jsfiddle.net/reginna/udt20p6q/22" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>I have no idea how red points can match the line for each device size.</p>