使用 svg 描边作为剪辑路径

Question

我想要一个空心圆作为剪辑路径，但是当我应用遮罩时，覆盖的区域是整个圆。有什么方法可以获得这种效果？ (像一个border-radius:50%的边框div)

<svg class="svg-defs">
    <defs>
        <clipPath id="clipping">
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="none" />
        </clipPath>
    </defs>
</svg>

剪辑路径：url(#clipping);

Answer 1

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="10" fill="none" />
</svg>

Answer 2

如您所见，<clipPath> 仅使用形状的填充。

改用 <mask>。

使用 svg 描边作为剪辑路径

using svg stroke as clip path

html

css

svg

clip-path