如何使用 CSS 將線性漸層應用於 SVG 矩形？

如何使用 CSS 將線性漸層應用於 SVG 矩形

將漸層應用於 SVG 元素是 Web 開發中的常見任務。在本文中，我們將探索如何使用 CSS 將線性漸層應用於 SVG 矩形。

理解漸變語法

在 CSS 中，線性漸層是使用背景圖像定義的財產。文法如下：

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• direction: 指定漸變流動的方向。常見值包括到頂部、到底部、向左和向右。
• color-stop: 表示漸層線上定義特定顏色的點。它以 0% 到 100% 之間的百分比值表示。可以定義多個色標，每個色標有不同的顏色和位置。

套用漸層

要將漸層套用於 SVG 矩形，可以使用 fill 屬性。只需提供 Linear-gradient() 值作為填充值即可。例如：

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

在 SVG 中定義漸變

在 SVG 文件本身中，您可以使用 定義漸變。元素。該元素通常放置在 中。部分。例如：

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

在上面的範例中，漸層是用兩個色標定義的：一個在 5% 處使用顏色 #F60，另一個在 95% 處使用顏色 #FF6。 id 屬性為漸層提供了唯一的標識符，讓您在 CSS 中引用它。

在CSS 中引用漸變

在CSS 中，您可以使用url() 函數：

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

這將應用 中定義的漸變

完整範例

以下是如何將線性漸變應用於SVG 矩形的完整範例：

<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%" stop-color="#F60" />
            <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
    </defs>

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

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>

應用使用CSS 對SVG 矩形進行線性漸變是一種強大的技術，可以增強設計的視覺吸引力。透過利用 fill 屬性和 Linear-gradient() 值，您可以建立具有各種顏色、方向和不透明度的漸層。

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