如何使用 CSS 將漸層應用於 SVG 元素？

使用CSS 將漸變應用於SVG 元素

在SVG 矩形元素上實現漸變功能需要將CSS 與SVG 強大的漸變功能結合使用。矩形元素的 fill 屬性允許漸變應用。

要建立線性漸變，請將以下CSS 規則加入樣式表：

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

現在，在SVG 檔案中，定義使用 的線性梯度和 elements:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

這裡，漸變沿著元素的長度從5% 的#F60 到95% 的#FF6。您可以調整顏色和偏移百分比來自訂漸層。

最後，使用rect 元素中的fill 屬性引用漸變：

<rect width="100" height="50" fill="url(#MyGradient)"/>

這種方法使您能夠應用美麗且使用CSS 對SVG 元素進行動態漸變，增強Web 應用程式的視覺吸引力和使用者體驗。

以上是如何使用 CSS 將漸層應用於 SVG 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！