如何在與自身重疊的路徑元素上隱藏“重疊”筆劃-有解無憂

我試圖讓下面的影像看起來不錯。

如何在與自身重疊的路徑元素上隱藏“重疊”筆劃

問題就在這里：如何在與自身重疊的路徑元素上隱藏“重疊”筆劃

基本上我想隱藏垂直筆劃與另一部分重疊的地方 <path/>

我在下面制作了一個簡化的片段供人們玩耍。

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>

謝謝！

uj5u.com熱心網友回復：

您可以使用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>

uj5u.com熱心網友回復：

或者，您可以將形狀拆分為多個路徑。并給他們一個不透明的填充。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/414829.html

標籤：

上一篇：破折號在圓svg的開頭沒有完整開始

下一篇：為什么我的csssvg影片在Firefox上卡頓而不在其他瀏覽器上卡頓？