我想模糊影像的角落，同時保留一個清晰的中心。使用 css background-blur() 是沒有問題的，因為 Firefox 不支持它。在模糊的影像上添加清晰的影像，然后將第一個影像屏蔽掉也是不可行的，因為最后我想用一個 Three.js 場景更改靜態影像。
我嘗試按照本教程進行操作，但使用徑向漸變，而不是固定條。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blurlayer" width="100%" height="100%">
<feGaussianBlur stdDeviation="4" result="blur"/>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</radialGradient>
<feComposite in="blur" in2="mask" operator="in" result="comp" />
<feMerge result="merge">
<feMergeNode in="SourceGraphic" />
<feMergeNode in="comp" />
</feMerge>
</filter>
</defs>
<image filter="url(#blurlayer)" x="0" y="0" width="100%" height="100%" xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg"/>
</svg>這是行不通的。有人可以幫我找出原因嗎？我設定了一個codepen，如果這對任何人有幫助。
uj5u.com熱心網友回復：
你必須做更多的作業——你不能在過濾器中間放置一個radialGradient——過濾器中只允許使用過濾器基元，并且你需要通過feImage匯入你想要使用的任何影像/形狀。
此外，當通過 feComposite/in 進行遮罩時 - “in”運算子僅使用 alpha 通道（與使用亮度的實際遮罩不同） - 因此您可以使用具有可變不透明度的黑色/黑色漸變。
最后，因為 Firefox 不支持 feImage 內部的片段識別符號，如果你想要 FF 支持，你必須在內容中定義你的掩碼并通過 feImage 匯入你想要使用的影像。這使得過濾器不可重復使用，但如果這是一次關閉內容，那很好。如果您確實想更普遍地使用此過濾器，那么您可以定義一個漸變填充的矩形，然后將其轉換為完整的 SVG 影像，然后通過 feImage 中的 data:uri 行內該影像。這是更多的作業（而且我似乎總是得到 svg xml 資料 URI 錯誤的轉義規則） - 所以我沒有在這里做。
FWIW - 該教程既完整又正確。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
<stop offset="0%" stop-color="black" stop-opacity="1" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</radialGradient>
<filter id="blurlayer" x="0%" y="0%" width="100%" height="100%">
<feImage xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg" width="100%" height="100%" result="original-image" preserveAspectRatio="none"/>
<feComposite in="original-image" in2="SourceGraphic" operator="in" result="unblurred" />
<feGaussianBlur in="original-image" stdDeviation="4" result="blurred-image"/>
<feComponentTransfer in="SourceGraphic" result="invertlight">
<feFuncA type="table" tableValues="1 0"/>
</feComponentTransfer>
<feComposite in="blurred-image" operator="in"/>
<feComposite operator="over" in="unblurred"/>
</filter>
</defs>
<g filter="url(#blurlayer)">
<rect fill="url(#radialGradient)" x="0" y="0" width="100%" height="100%"/>
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359344.html
上一篇：Angular：事件的SVG屬性