Question

假设我有一个半径为r的SVG圆。现在，假设我有一条从SVG圆心开始的SVG线。如何确定其与圆弧的交点的x2和y2坐标。

<line x1="500" y1="500" x2="300" y2="75" style="stroke:#156217;stroke-width:4" />
<circle cx="500" cy="500" r="100" stroke="black" stroke-width="3" fill="transparent" />

Answer 1

您可以使用clipPath剪切线。 use元素使我们可以指向要重复用于剪贴的circle元素。

<svg viewBox="0 0 1000 1000">
<defs>
  <clipPath id="cp">
    <use xlink:href="#c"/>
  </clipPath>
</defs>
<line x1="500" y1="500" x2="300" y2="75" style="stroke:#156217;stroke-width:4" clip-path="url(#cp)" />
<circle id="c" cx="500" cy="500" r="100" stroke="black" stroke-width="3" fill="none" />
</svg>

如何找到与SVG圆的半径相交的SVG线的坐标？

1 个答案: