SVG 基於背景反轉筆觸顏色

Question

我有一個帶有stroke的 SVG，當它下面的背景為藍色時，我想將其反轉為白色。

這是我想要的效果

灰色是來自 CSS 變量的設置顏色。

SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px" viewBox="0 0 25 210">
   <g>
     <path d="M -678 692 L 702 692" fill="none" stroke-width="5" stroke-miterlimit="10" stroke-dasharray="15 15" transform="rotate(270,12,692)" pointer-events="all"/>
   </g>
</svg>

我已經嘗試添加兩個單獨的 SVG； 一個是藍色部分的白色筆划，另一個是灰色的主體，但是 SVG 之間的間隙會在不同的屏幕尺寸上發生變化，這是我不想要的。

使用兩個 SVG

我還嘗試使用 CSS filter 、 backdrop-filter和mix-blend-mode屬性的組合，但是我無法獲得正確的效果，因為filter會影響整個 SVG 而backdrop-filter不會修改路徑的筆划顏色。

 header { display: block; } .header__nav-wrapper { background: -webkit-gradient(linear, left top, right top, from(#122F76), to(#1941A2)); background: linear-gradient(0.25turn, #122F76, #1941A2); padding: 2.5rem 8rem 0 8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 150px; } .header__wave { display: block; position: relative; width: 100%; } .top-line { position: relative; width: 100%; height: 100px; } .top-line__line--left { left: 200px; top: -200px; } .top-line__line { position: absolute; stroke: #999; z-index: 999; }

 <header class="header"> <div class="header__nav-wrapper"></div> <!-- Include svg wave --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="header__wave" version="1.1" viewBox="0 0 1920 80"> <defs> <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="mx-gradient-122f76-1-1941a2-1-e-0"> <stop offset="0%" style="stop-color: rgb(18, 47, 118); stop-opacity: 1;" /> <stop offset="100%" style="stop-color: rgb(25, 65, 162); stop-opacity: 1;" /> </linearGradient> </defs> <g> <path d="M 0 0 L 1920 0 L 1920 68 Q 1440 46.4 960 68 Q 480 89.6 0 68 L 0 12 Z" fill="url(#mx-gradient-122f76-1-1941a2-1-e-0)" pointer-events="all" /> </g> </svg> </header> <div class="top-line"> <div class="top-line__line top-line__line--left"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px" viewBox="0 0 25 400"> <g> <path d="M -678 692 L 702 692" fill="none" stroke-width="5" stroke-miterlimit="10" stroke-dasharray="15 15" transform="rotate(270,12,692)" pointer-events="all"/> </g> </svg> </div> </div>

如果您需要查看代碼，這里有一個CodePen鏈接。

如果可能的話，我真的很感激只使用 CSS 的方法，但是如果需要的話，我非常樂意使用 JavaScript。

謝謝！

Answer 1

在這個例子中，我使用虛線作為兩個<rect>的掩碼。 下面（首先定義）是兩個<rect> ，它們具有虛線應該具有的顏色。

波浪也被定義為掩碼，可以在定義 SVG 上部的兩個<rect>上重復使用。

 <svg xmlns="http://www.w3.org/2000/svg" class="header__wave" viewBox="0 0 200 80"> <defs> <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="g1"> <stop offset="0%" stop-color="navy" stop-opacity="1" /> <stop offset="100%" stop-color="navy" stop-opacity=".2" /> </linearGradient> <mask id="line"> <rect x="0" y="0" width="200" height="80" fill="white" /> <line x1="100" y1="0" x2="100" y2="80" stroke="black" stroke-width="2" stroke-dasharray="5 2" /> </mask> <mask id="wave"> <rect width="200" height="31" fill="white" /> <path transform="translate(0 30)" fill="white" d="M 0 0 L 200 0 L 200 7 Q 150 5 100 7 Q 50 9 0 7 Z" /> </mask> </defs> <rect fill="gray" width="200" height="79" /> <rect fill="white" width="200" height="80" mask="url(#wave)" /> <g mask="url(#line)"> <rect fill="white" width="200" height="80" /> <rect fill="url(#g1)" width="200" height="80" mask="url(#wave)" /> </g> </svg>