我有一個帶有漸變背景和前景圖示的 SVG。目前，該圖示只是一個頂部帶有折線的填充路徑，但可以改為將其拆分為多條路徑，其中折線將是筆劃。但是，我想讓它們顯示背景而不是具有顏色的折線/筆劃，就好像它在前景中切了一個洞一樣。由于背景是漸變色（實際上是陰影濾鏡）而不是純色，因此我不能只使用與背景顏色相同的筆畫來執行此操作。這就是我想象的結果，如果我可以在多條路徑上具有負筆畫寬度。
例如，我將使用 SVG 這實際上是用于（我的個人資料圖片）所以，這是我當前的 SVG 代碼
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="black" fill="rgb(95,95,95)" viewBox="-30 -30 276 260" width="276" height="260" stroke-width="4">
<defs>
<filter id="shadow" x="-30" y="-30" width="276" height="260">
<feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect x="-30" y="-30" width="276" height="260" fill="#c41313" stroke="none"/>
<path d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" filter="url(#shadow)"/>
<g fill="none">
<polyline points="82 166, 108 179, 135 166"/>
<polyline points="54 130, 108 157, 162 130"/>
<polyline points="0 54, 108 108, 216 54"/>
<polyline points="49 78.5, 108 49, 167 78.5"/>
<line x1="108" y1="0" x2="108" y2="49"/>
<line x1="108" y1="200" x2="108" y2="108"/>
</g>
</svg>uj5u.com熱心網友回復：
更傳統的方法是使用<mask>：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276 260" width="276" height="260">
<defs>
<mask id="mask" stroke-width="4" stroke="#000">
<g transform="translate(30 30)">
<path id="shapeBG" d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" fill="#fff" />
<g fill="none">
<polyline points="82 166, 108 179, 135 166" />
<polyline points="54 130, 108 157, 162 130" />
<polyline points="0 54, 108 108, 216 54" />
<polyline points="49 78.5, 108 49, 167 78.5" />
<line x1="108" y1="0" x2="108" y2="49" />
<line x1="108" y1="200" x2="108" y2="108" />
</g>
</g>
</mask>
<filter id="shadow" x="0" y="0" width="276" height="260">
<feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect id="bg" x="0" y="0" width="100%" height="100%" fill="#c41313" stroke="none" />
<g filter="url(#shadow)">
<rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill="rgb(95,95,95)" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -30 276 260" width="276" height="260">
<g id="mask" stroke-width="4" stroke="#000">
<path id="shapeBG" d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" fill="#fff" />
<g fill="none">
<polyline points="82 166, 108 179, 135 166" />
<polyline points="54 130, 108 157, 162 130" />
<polyline points="0 54, 108 108, 216 54" />
<polyline points="49 78.5, 108 49, 167 78.5" />
<line x1="108" y1="0" x2="108" y2="49" />
<line x1="108" y1="200" x2="108" y2="108" />
</g>
<text style="font-size:11; font-family:Arial, sans-serif" stroke-width="0" x="0" y="80%" dominant-baseline="middle">Mask: white fills/strokes=opaque; <tspan x="0" dy="12">black fills/strokes=transparent<tspan></text>
</svg>在右側，您會看到實際的蒙版圖形：
- 白色填充/筆觸將變得不透明
- 黑色填充/筆觸將變得透明
<mask>也可用于獲得半透明筆觸，例如通過將筆觸顏色設定為rgb(128,128,128).
關于軟體支持，您還可以通過轉換重新調整圖形以避免負 viewBox 值：一些編輯器對此有疑問。
uj5u.com熱心網友回復：
您可以使用綠屏技術在單個過濾器中執行此操作。您將外部和內部線條設為純藍色和綠色，然后使用 ColorMatrix 將它們選擇為單獨的圖層，然后將它們從原始形狀中合成/輸出。使用 shape-rendering=crispEdges 很重要，因為如果不這樣做，就會出現看起來很糟糕的抗鋸齒偽影。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="black" fill="rgb(95,95,95)" viewBox="-30 -30 276 260" width="276" height="260" stroke-width="4" color-interpolation-filters="sRGB" shape-rendering="crispEdges">
<defs>
<filter id="green-screen" x="-30" y="-30" width="276" height="260">
<feColorMatrix type="matrix" values="0 0 0 0 0 0 2 0 0 -1 0 0 0 0 0 -1 2 -1 0 -1" result="exterior-line"/>
<feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 2 0 -1 -1 -1 2 0 -1" result="interior-line"/>
<feComposite operator="out" in="SourceGraphic" in2="exterior-line"/>
<feComposite operator="out" in2="interior-line" result="masked-shape"/>
<feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32"/>
<feComposite operator="over" in="masked-shape"/>
</filter>
</defs>
<rect x="-30" y="-30" width="276" height="260" fill="#c41313" stroke="none"/>
<g filter="url(#green-screen)">
<path d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" stroke="rgb(0,255,0)"/>
<g fill="none" stroke="rgb(0,0,255)">
<polyline points="82 166, 108 179, 135 166"/>
<polyline points="54 130, 108 157, 162 130"/>
<polyline points="0 54, 108 108, 216 54"/>
<polyline points="49 78.5, 108 49, 167 78.5"/>
<line x1="108" y1="0" x2="108" y2="49"/>
<line x1="108" y1="200" x2="108" y2="108"/>
</g>
</g>
</svg>uj5u.com熱心網友回復：
使用CSS mix-blend-mode似乎可以實作您想要的，但不確定如何修復灰色和陰影：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" stroke="black" fill="rgb(95,95,95)" viewBox="-30 -30 276 260" width="276" height="260" stroke-width="4">
<defs>
<filter id="shadow" x="-30" y="-30" width="276" height="260">
<feGaussianBlur in="SourceAlpha" out="blurOut" stdDeviation="32"/>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect x="-30" y="-30" width="276" height="260" fill="#c41313" stroke="none"/>
<g stroke="black" style="mix-blend-mode: color-dodge;">
<path d="M108 0 L216 54 L216 103 L162 130 L162 152 L135 166 L135 187 L108 200 L82 187 L82 166 L54 152 L54 130 L0 103 L0 54 Z" filter="url(#shadow)"/>
<g fill="none">
<polyline points="82 166, 108 179, 135 166"/>
<polyline points="54 130, 108 157, 162 130"/>
<polyline points="0 54, 108 108, 216 54"/>
<polyline points="49 78.5, 108 49, 167 78.5"/>
<line x1="108" y1="0" x2="108" y2="49"/>
<line x1="108" y1="200" x2="108" y2="108"/>
</g>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/465884.html