我的應用程式使用 SVG 渲染虛擬桌面場景。用戶可以在場景頂部放置標記，然后在標記周圍的給定半徑范圍內顯示背景。令牌可以顯示不同的半徑。
最初，我使用剪輯路徑來顯示帶有硬邊的標記周圍的圓圈。這很好用，沒有問題。
現在，我想知道我是否可以創建從顯露到未顯露的“平滑”過渡，例如，使用具有徑向漸變的圓圈（從中心的白色到黑色到邊緣）并使用組合的圓圈作為蒙版來應用到現場。
我的嘗試使用單個徑向漸變定義和多個<circle fill="url(#gradient")>，<mask>然后將其應用于底層影像。但是，正如您在下圖中看到的那樣，漸變不會平滑地相互融合。
這些徑向漸變不能很好地融合
我理解為什么會發生這種情況，但我正在尋找另一種使用 SVG 實作效果的方法。
uj5u.com熱心網友回復：
使用 alpha 而不是黑色/白色指定漸變，這很好用。（請在以后發布測驗代碼）
<svg width="800px" height="800px" viewBox="0 0 400 400">
<defs>
<radialGradient id="myGradient">
<stop offset="0%" stop-color="white" stop-opacity="100%"/>
<stop offset="40%" stop-color="white" stop-opacity="100%"/>
<stop offset="60%" stop-color="white" stop-opacity="60%"/>
<stop offset="95%" stop-color="white" stop-opacity="0%"/>
</radialGradient>
<mask id="myMask" maskContentUnits="objectBoundingBox">
<circle cx=".25" cy=".25" r=".25" fill="url(#myGradient)"/>
<circle cx=".25" cy=".55" r=".20" fill="url(#myGradient)"/>
<circle cx=".65" cy=".35" r=".35" fill="url(#myGradient)"/>
</mask>
</defs>
<image href="https://nostalgiacentral.com/wp-content/uploads/2015/12/snakesladders5.jpg" x="10" y="10" height="200" width="200" mask="url(#myMask)" preserveAspectRatio="xMinYMin slice"/>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437796.html
標籤：svg