Question

我希望在两个圆圈的交叉点周围显示笔划。

这是我的代码：

<clipPath id="clip">
  <circle cx="100" cy="100" r="50" />
</clipPath>
<circle cx="150" cy="100" r="50" fill="red" clip-path="url(#clip)" stroke="black" />

剪裁圆圈的笔划也会被clipPath剪裁，但我希望它能够环绕两个圆圈的交叉点。

Answer 1

只需将笔画宽度的一半加到剪裁圆的半径即可。

例如，我们有半径为50且笔画宽度为10的圆圈。因此我们使剪裁圆的半径为（50 + 5）= 55。

<svg>

    <clipPath id="clip1">
        <circle cx="100" cy="100" r="55" stroke="black" fill="none" stroke-width="5"/>
    </clipPath>
    <clipPath id="clip2">
        <circle cx="150" cy="100" r="55" stroke="black" fill="red" stroke-width="5"/>
    </clipPath>

    <circle cx="150" cy="100" r="50" stroke="black" fill="red" stroke-width="10" clip-path="url(#clip1)" />
    <circle cx="100" cy="100" r="50" stroke="black" fill="none" stroke-width="10" clip-path="url(#clip2)" />
    
</svg>

Answer 2

一种选择是让两个圆圈既作为剪辑路径又作为描边圆圈。

<clipPath id="clip1">
  <circle cx="100" cy="100" r="50" id="circle1" stroke="black" fill="none"/>
</clipPath>
<clipPath id="clip2">
  <circle cx="150" cy="100" r="50" id="circle2" stroke="black" fill="red"/>
</clipPath>

<use xlink:href="#circle2" clip-path="url(#clip1)"/>
<use xlink:href="#circle1" clip-path="url(#clip2)"/>

确保未填充第二个<use>元素，因为它将覆盖第一个<use>元素的一半笔划。

将笔划添加到剪切路径

2 个答案: