使一条路径被一个圆圈切断

Question

当它在圆圈之外时，是否有办法切断路径？

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red" />
  <path d="M0 0 L100 100" stroke-width="1px" stroke="black" />
</svg>

是否可以在不更改路径中的d="M200 175 L696 880"的情况下使该线留在圆圈内（并且在圆圈外不可见）？

Answer 1

您可以使用clipPath来防止事物在另一个形状之外绘制。

<svg width="100" height="100">
  <clipPath id="clip">
      <circle cx="50" cy="50" r="50" fill="red" />
  </clipPath>
  <circle cx="50" cy="50" r="50" fill="red" />
  <path d="M0 0 L100 100" stroke-width="1px" stroke="black" clip-path="url(#clip)"/>
</svg>