我試圖在一個圓圈內包含一個 feGaussianBlur 以使圓圈的漸變更平滑，但模糊會擴展到圓圈之外。
我還在頂部圓圈后面使用另一個帶有 feGaussianBlur 的漸變，它將擴展到它之外，所以我不能在頂部圓圈上使用蒙版來掩蓋超出它的顏色溢位，否則它下面的圓圈會模糊也被覆寫。
uj5u.com熱心網友回復：
在此示例中，我將漸變添加到兩個圓形和一個矩形。使用剪輯路徑將矩形制作成圓形。第二個圓圈和矩形應用了過濾器。過濾器具有 feComposite/in 以將過濾器保持在圓圈內，如Michael Mullany建議的那樣：<feComposite operator="in" in2="SourceGraphic"/>
在我看來，沒有過濾器的那個看起來更平滑。所以，我不知道這是否有意義——也許在你的用例中？
<svg width="500" viewBox="0 0 300 110" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
<linearGradient id="gradient">
<stop offset="0" stop-color="blue" />
<stop offset="30%" stop-color="blue" />
<stop offset="70%" stop-color="lightblue" />
<stop offset="100%" stop-color="lightblue" />
</linearGradient>
<clipPath id="cp1">
<circle cx="50" cy="50" r="45" />
</clipPath>
</defs>
<circle cx="50" cy="50" r="45" fill="url(#gradient)" />
<text font-size="10" x="50" y="105" text-anchor="middle">circle no filter</text>
<circle cx="150" cy="50" r="45" fill="url(#gradient)" filter="url(#blur)" />
<text font-size="10" x="150" y="105" text-anchor="middle">circle filter</text>
<rect transform="translate(200 0)" width="100" height="100" fill="url(#gradient)" clip-path="url(#cp1)" filter="url(#blur)"/>
<text font-size="10" x="250" y="105" text-anchor="middle">rect filter</text>
</svg>uj5u.com熱心網友回復：
要包含原始圖形區域的模糊，請在過濾器的末尾添加一個 feComposite/in。
<feComposite operator="in" in2="SourceGraphic"/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459445.html
標籤：svg
下一篇：在一行內對齊按鈕和按鈕內容