SVG 径向渐变

最新推荐文章于 2022-07-18 16:34:20 发布

大前小白

最新推荐文章于 2022-07-18 16:34:20 发布

阅读量162

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

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

如何创建径向渐变

我们可以通过 <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%"

最低0.47元/天解锁文章

大前小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG 径向渐变

上一节我们讲的是线性渐变，本节我们来学习径向渐变。径向渐变可以理解为以某一点为圆心，颜色值沿半径方向进行渐变。如何创建径向渐变我们可以通过 <radialGradient> 元素创建一个 SVG 的径向渐变。径向渐变的使用其实和线性渐变差不多，也是嵌套在 <defs> 元素中使用，在使用时需要定义一个唯一的 id 名称，然后通过 fill 属性引用。示例：定义一个径向渐变的圆：<!DOCTYPE html><html> <head&g
复制链接

扫一扫