svg - 使路径被圆圈切断

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>