使用svg stroke作为剪辑路径[重复]答案

【问题标题】：using svg stroke as clip path [duplicate]使用svg stroke作为剪辑路径[重复]
【发布时间】：2017-03-18 01:32:22
【问题描述】：

我想要一个空心圆圈作为剪辑路径，但是当我应用蒙版时，覆盖的区域是整个圆圈。有什么方法可以获得这种效果？（就像一个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);

【问题讨论】：

标签： html css svg clip-path

【解决方案1】：

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

请改用<mask>。

【讨论】：

【解决方案2】：

<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>

【讨论】：

我不能使用笔画作为剪辑路径..