SVG <linearGradient>用法及代碼示例

SVG <linearGradient> 元素允許開發人員定義線性漸變以應用 SVG 元素。它允許從一種顏色平滑過渡到另一種顏色。這是最可靠的技術。

線性漸變可以定義為垂直、角度漸變或水平：

垂直漸變當 x1 和 x2 相等且 y1 和 y2 不同時創建。
角度梯度當 x1 和 x2 不同並且 y1 和 y2 不同時創建。
水平漸變當 y1 和 y2 相等且 x1 和 x2 不同時創建。

特征：

使用默認的從左到右的漸變，盡管可以輕鬆更改；我稍後會向您展示如何操作。
漸變的停止元素手柄類似於 Adobe 產品和 Photoshop。
偏移位置的值可以從 0 到 1 或從 0% 到 100% 的百分比。它表示結構輻射的顏色。
漸變中使用的顏色可以從任何 CSS 顏色定義。

用法:

<linearGradient> 標簽的 id 屬性對於漸變來說必須是唯一的。
<linearGradient> 標簽的 x1、x2、y1 和 y2 屬性將表示漸變的開始和結束位置。

<linearGradient id="Geek1" x1="2%" y1="1%" x2="100%" y2="1%">

漸變的顏色範圍可以由兩種或多種顏色組成。 stop> 標簽用於指定每種顏色。 offset 屬性用於表示漸變顏色的開始和結束位置。

<stop offset="0%" 
    style="stop-color:rgb(0,255,0);stop-opacity:1"/>

fill 屬性將橢圓元素鏈接到漸變。

<ellipse cx="190" cy="70" 
    rx="85" ry="55" fill="url(#Geek1)"/>

示例 1：定義從綠色到藍色的橢圓線性漸變。

在 <linearGradient> 標簽內有兩個由 <stop> 元素定義的色標。第一個色標以 0% 的偏移量設置藍色，第二個色標以 100% 的偏移量設置綠色。

HTML


<!DOCTYPE html>
<html>
<svg height="150" width="400">
    <defs>
        <linearGradient id="Geek1" x1="2%"
            y1="1%" x2="100%" y2="1%">
            <stop offset="0%" style=
                "stop-color:rgb(34, 221, 81);stop-opacity:1" />
            <stop offset="100%" style=
                "stop-color:rgb(11, 22, 172);stop-opacity:1" />
        </linearGradient>
    </defs>
     
    <ellipse cx="200" cy="70"
        rx="85" ry="55" fill="url(#Geek1)" />
</svg>
</html>

輸出：

綠色到藍色

示例 2：定義從紅到黑的矩形線性漸變。

<defs> 標簽內的線性漸變賦予漸變線性的 id。然後矩形填充屬性引用該 id。

HTML


<!DOCTYPE html>
<html>
<body>
    <h1>GeeksForGeeks</h1>
    <svg width="600" height="600">
        <defs>
            <linearGradient id="Geek1">
                <stop offset="0%" stop-color="#FF0000"/>
                <stop offset="100%" stop-color="#00FFF00"/>
            </linearGradient>
        </defs>
        <g>
            <text x="30" y="50">GeeksForGeeks: </text>
            <rect x="100" y="100" width="200" height="200"
                stroke="green" stroke-width="3"
                fill="url(#Geek1)"/>
        </g>
    </svg>
</body>
</html>

輸出：

支持的瀏覽器：此 SVG 元素支持以下瀏覽器：

Chrome
Edge
Firefox
IE瀏覽器
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自ayushcoding100大神的英文原創作品 SVG <linearGradient> Element。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。