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

时间:2015-12-13 22:20:35

标签: svg

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

<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"的情况下使该线留在圆圈内(并且在圆圈外不可见)?

1 个答案:

答案 0 :(得分:4)

您可以使用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>