如何使用 CSS 將線性漸層應用於 SVG 矩形？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-11-04 05:55:29

原創

673 人瀏覽過

How do you apply a linear gradient to an SVG rectangle using CSS?

如何使用 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中文網其他相關文章！