使用剪辑路径从圆圈中的 4 条 svg 线中删除 37px

Posted 2023-03-23

【中文标题】使用剪辑路径从圆圈中的 4 条 svg 线中删除 37px

【英文标题】：Using clip-path to remove 37px from 4 svg lines in the circle

【发布时间】：2019-10-18 02:31:49

【问题描述】：

我要做的是删除圆圈中间的 svg 线。

如何使用剪辑路径来完成？

采取这个： https://i.imgur.com/DGX3Yji.png

然后把它变成这样： https://i.imgur.com/gg4XFUq.png

代码： https://jsfiddle.net/5r1dg4hx/3/

https://i.imgur.com/SGzGzaE.png

  <svg class="stack" aria-hidden="true"   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>

【参考方案1】：

您需要为剪切路径绘制一个带有孔的路径：

<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）在相同的位置画一个和内圈一样大的圆。

接下来，您将线包裹在一个组中并剪辑该组。

svgborder:1px solid;
circlefill:none;stroke:black

<svg class="stack" aria-hidden="true"   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>