我想做的是删除圆圈中间的svg线。
如何使用剪辑路径完成此操作?
以这个为例:https://i.stack.imgur.com/sSSFj.png
把它变成这个:https://i.stack.imgur.com/R3KnS.png
法典:https://jsfiddle.net/5r1dg4hx/3/
https://i.stack.imgur.com/f2T8b.png
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
您需要为剪切路径绘制一条带有孔的路径:
<path d="M0,0 0,194 260,194 260,0 0,0
M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
路径的第一部分(M0,0 0,194 260,194 260,0 0,0
(是绘制一个与svg画布一样大的矩形。第二部分(M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40
(是画一个和内圆一样大的圆,并且位置相同。
接下来,将线条换行到一个组中并剪裁该组。
svg{border:1px solid;}
circle{fill:none;stroke:black}
<svg class="stack" aria-hidden="true" width="260" height="194" viewbox="0 0 260 194">
<defs>
<clipPath id="clip">
<path d="M0,0 0,194
260,194 260,0 0,0 M150.8, 95.40A20.8, 20.8 0 0 1 109.2 95.40A20.8, 20.8 0 0 1 150.8, 95.40" />
</clipPath>
</defs>
<g clip-path="url(#clip)">
<line stroke="teal" x1="131" y1="40" x2="130" y2="149"></line>
<line stroke="dodgerblue" x1="91" y1="133" x2="170" y2="58"></line>
<line stroke="purple" x1="77" y1="95" x2="185" y2="96"></line>
<line stroke="green" x1="169" y1="135" x2="93" y2="56"></line>
</g>
<circle class="outer" cx="131" cy="95" r="55"></circle>
<circle cx="130" cy="95.40" r="20.8"></circle>
</svg>