向剪切路径添加描边

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

一种选择是让两个圆既充当剪辑路径又充当描边圆。

<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> 元素笔划的一半。

Answer 2

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

例如，我们有半径为 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>

向剪切路径添加描边

Add a stroke to a clipped path

svg

stroke