如何讓 SVG 筆划顯示背景？

Question

我有一個帶有漸變背景和前景圖標的 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>

我希望它不是黑色輪廓，而是圖標中的一個缺口，就像這樣。 當然，對於這個特定的圖像，我可以手動制作每個部分 - 由黑色輪廓分隔 - 有自己的路徑而沒有筆觸，重新創建效果，但由於我使用此圖像的方式，我需要筆觸-width 是可變的，並且具有特定路徑不允許這樣做，除非有一種方法可以在 Javascript 或 PHP 中自動生成這些路徑，但我不知道如何實現它。 我能想到的解決這個問題的唯一方法是找到每個部分的中心並增加灰色輪廓以減小間隙（因此最大間隙將是 stroke-width 為 0，最小間隙將具有 stroke-寬度等於每個部分的半徑），但對於我的情況，這仍然無效。 那么有什么選擇呢？

Answer 1

更傳統的方法是使用<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 值：一些編輯器對此有疑問。

Answer 2

使用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>

Answer 3

您可以使用綠屏技術在單個濾鏡中執行此操作。 您將外部和內部線條設為純藍色和綠色，然后使用 ColorMatrix 將它們 select 分成單獨的層，然后從原始形狀中合成/移除它們。 使用 shape-rendering=crispEdges 很重要，因為如果您不這樣做，抗鋸齒效果會很糟糕。

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 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"/> <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" fill="rgb(95,95,95)" 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>