如何使用javascript在SVG中找到圆弧的中点

Question

我想要 svg 中圆弧的中点..任何人都可以告诉公式来找到圆弧的中点.,

Answer 1

这个问题的答案并不简单。这是因为在 SVG 中，弧可以是椭圆弧。例如，您认为以下弧线的中点是什么？

<svg width="200" height="200" viewBox="0 0 100 100">
  <path fill="none" stroke="black" stroke-width="2"
        d="M 20,75 A 21,50, 45, 1 1, 60,75"/>
</svg>

无论如何，在不涉及复杂公式的情况下，最简单的方法可能是利用 SVG 的pointAtLength()方法。

var myarc = document.getElementById("myarc");

// Get the length of the path
var pathLen = myarc.getTotalLength();

// How far along the path to we want the position?
var pathDistance = pathLen * 0.5;

// Get the X,Y position
var midpoint = myarc.getPointAtLength(pathDistance)

// For fun, let's add a dot at that position to mark it.
var svg = myarc.ownerSVGElement;
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", midpoint.x);
circle.setAttribute("cy", midpoint.y);
circle.setAttribute("r", "5");
circle.setAttribute("fill", "red");
svg.appendChild(circle);

<svg width="200" height="200" viewBox="0 0 100 100">
  <path id="myarc" fill="none" stroke="black" stroke-width="2"
        d="M 20,75 A 21,50, 45, 1 1, 60,75"/>
</svg>