如何在与自身重叠的路径元素上隐藏“重叠”笔划答案

【问题标题】：How to hide "overlapping" stroke on a path element that overlaps with itself如何在与自身重叠的路径元素上隐藏“重叠”笔划
【发布时间】：2022-01-12 15:49:41
【问题描述】：

我正在尝试使以下图像看起来不错。

问题就在这里：

基本上我想隐藏垂直笔划与<path/>的另一部分重叠的地方

我在下面做了一个简化的 sn-p 供人们玩。

path {
  transform: translate(50px, 50px);
  stroke-width: 1;
  stroke: black;
  opacity: .5;
  box-sizing: inherit;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="green" d="
          M 0,0 
   L -5,0
   L -5,-5
   L -22,-5
   L -22,-20
   L 22,-20
   L 22,-5
   L 5,-5
   L 5,0
   L 50,0
   L 50,-25
   L -22,-25
   L -22,-40
   L 132,-40
   L 132,-25
   L 60,-25
   L 60,0
   L 94,0
   L 94,-5
   L 33,-5
   L 33,-20
   L 165,-20
   L 165,-5
   L 104,-5
   L 104,0
          L 152.5,0 
          Q 155.5,8 152.5,16
          L 0,16 
          z"></path>
</svg>

谢谢！

【问题讨论】：

有什么原因不能让路径填充纯色（而不是半透明）？
抱歉，没有真正的理由。

标签： css svg

【解决方案1】：

你可以用stroke-dasharray 伪造它。如果这些数字是自动生成的，则需要进行一些数学计算才能计算出需要去哪里，但如果一切都是用直线制作的，那应该不会太难。

<svg height="150px" width="400px" viewBox="-50-50 250 100">
    <path stroke-width="1" stroke="black" fill="green"
          d="M 0,0
            L -5,0
            L -5,-5
            L -22,-5
            L -22,-20
            L 22,-20
            L 22,-5
            L 5,-5
            L 5,0
            L 50,0
            L 50,-25
            L -22,-25
            L -22,-40
            L 132,-40
            L 132,-25
            L 60,-25
            L 60,0
            L 94,0
            L 94,-5
            L 33,-5
            L 33,-20
            L 165,-20
            L 165,-5
            L 104,-5
            L 104,0
            L 152.5,0 
            Q 155.5,8 152.5,16
            L 0,16
            z"
        stroke-dasharray="172 16 338 16 9999" />
</svg>

【讨论】：

【解决方案2】：

或者，您可以将形状拆分为多个路径。并给它们一个不透明的填充。

path {
  transform: translate(50px, 50px);
  stroke-width: 1;
  stroke: black;
  box-sizing: inherit;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="#80c080" d="
   M 0,0 
   L -5,0
   L -5,-5
   L -22,-5
   L -22,-20
   L 22,-20
   L 22,-5
   L 5,-5
   L 5,0
   L 50,0
   L 50,-25
   L -22,-25
   L -22,-40
   L 132,-40
   L 132,-25
   L 60,-25
   L 60,0
   L 152.5,0 
   Q 155.5,8 152.5,16
   L 0,16
   z
   "/>

<path stroke-width="1" stroke="black" fill="#80c080" d="
   M 94,0.5
   L 94,-5
   L 33,-5
   L 33,-20
   L 165,-20
   L 165,-5
   L 104,-5
   L 104,0.5
   "/>
</svg>

【讨论】：