使用svg笔划作为剪辑路径

Question

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

clip-path：url（#clipping）;

Answer 1

正如您所发现的，<tr class="even"> <td><strong><a href='../eagleweb/viewDoc.jsp?node=DOC186S8881'>DEED<br/> 2016002023</a></strong></td> <td><a href='../eagleweb/viewDoc.jsp?node=DOC186S8881'><b> Recording Date: </b>01/12/2016 08:05:17 AM&nbsp;&nbsp;&nbsp;<b>Book Page: </b> <table cellspacing=0 width="100%"><tr><td width="50%" valign="top"><b>Grantor:</b> ARELLANO ISAIAS</td><td width="50%" valign="top"><b>Grantee:</b> ARELLANO ISAIAS, ARELLANO ALICIA</td></tr></table> <b>Number Pages:</b> 3<br></a></td> <td></td> <td></td></tr>仅使用形状的填充。

改为使用<clipPath>。

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