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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。