SVG 径向渐变

最新推荐文章于 2024-08-21 06:03:50 发布

大前小白

最新推荐文章于 2024-08-21 06:03:50 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： SVG 文章标签： svg html css3

本文链接：https://blog.csdn.net/weixin_45195200/article/details/114122668

SVG 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了SVG中的径向渐变，通过元素创建，并展示了如何定义颜色和调整渐变效果。示例包括圆形和椭圆形状的径向渐变，详细解释了和的属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节我们讲的是线性渐变，本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心，颜色值沿半径方向进行渐变。

如何创建径向渐变

我们可以通过 <radialGradient> 元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多，也是嵌套在 <defs> 元素中使用，在使用时需要定义一个唯一的 id 名称，然后通过 fill 属性引用。

示例：

定义一个径向渐变的圆：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500" height="300">
            <defs>
                <radialGradient id="radia" cx="50%" cy="50%" r="40%" fx="50%" fy="50%">
                    <stop offset="0%"  style="stop-color:rgb(110, 244, 248); "/>
                    <stop offset="70%"  style="stop-color:rgb(212, 129, 194); "/>
                    <stop offset="100%"  style="stop-color:rgb(243, 204, 132); "/>
                </radialGradient>
            </defs>
            <circle fill="url(#radia)" cx="200" cy="120" r="100" />
        </svg>
    </body>
</html>

在浏览器中的演示效果：

上述代码中在 <radialGradient> 元素中定义了一个id 属性，方便后面的引用。<radialGradient> 内通过 <stop> 元素定义了三个颜色，<stop> 元素中的三个属性在上一节中讲到过。

除此之外， <radialGradient> 元素中的参数和 <linearGradient> 元素中的属性还是有一些不同，如下所示：

属性	描述
r	圆的半径
cx	渐变的中心点 x 坐标，要移动渐变的位置，可以改变这个值
cy	渐变的中心点 y 坐标，要移动渐变的位置，可以改变这个值
fx	渐变的焦点 x 坐标，可以用于移动渐变第一个颜色结点的位置
fy	渐变的焦点 y 坐标，可以用于移动渐变第一个颜色结点的位置
fr	定义径向渐变的焦点的半径，默认值为 0%

示例：

例如创建一个椭圆渐变：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width="500" height="300">
            <defs>
                <radialGradient id="radia" cx="40%" cy="50%" r="50%" fx="40%" fy="50%" >
                    <stop offset="0%"  style="stop-color:rgb(206, 88, 108); "/>
                    <stop offset="50%"  style="stop-color:rgb(80, 181, 206); "/>
                    <stop offset="70%"  style="stop-color:rgb(233, 199, 125); "/>
                    <stop offset="90%"  style="stop-color:rgb(189, 138, 236); "/>
                    <stop offset="100%"  style="stop-color:rgb(152, 252, 190); "/>
                </radialGradient>
            </defs>
            <ellipse fill="url(#radia)" cx="250" cy="100" rx="150" ry="100"></ellipse>
        </svg>
    </body>
</html>