• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

【前端SVG】线性渐变、径向渐变

武飞扬头像
juejin
帮助243

前言

SVG中,并非只能填充图形颜色和添加描边,你也可以像CSS一样,给绘制的图形应用添加渐变色。分为线性渐变、径向渐变,具体如何应用渐变色我们进行看下去:

在SVG中我们不能使用linear-gradient函数,这是无效代码!!!

线性渐变

线性渐变是沿着直线改变颜色,我们看一个线性渐变的例子:

<svg width="300" height="500">
    <defs>
        <linearGradient id="test">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>

28.png

我们在画布中创建一个defs元素(稍后会讲到),在内部创建一个linearGradient标签(该标签用于定义线性渐变,应用于图形元素的填充、描边)。内部放了两个stop标签,这两个标签通过指定的位置offset属性和stop-color属性来说明在渐变的特定位置上渲染指定的颜色。

这里要注意的是offset值是从0开始的,范围为0%—100%(或者是0—1),如果出现位置重合,将采用后面设置的值。

stop标签一共有三个属性,上面我们已经展示了stop标签的两个属性,还有一个stop-opacity属性,用于设置某个位置的透明度。

<stop offset="85%" stop-color="gold" stop-opacity="0"/>

29.png

使用渐变需要在图形标签上使用strokefill进行引用,使用url引用元素的方式将渐变的ID值传入即可。(stroke也是同样操作)

linearGradient标签中你还可以定义渐变的开始和结束位置。它们分别是x1x2y1y2。默认是水平渐变的,可以通过修改这些属性来改变渐变的方向,下面看看垂直渐变的例子:

<svg width="300" height="500">
    <defs>
        <linearGradient id="test" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="5%" stop-color="#12c2e9" />
            <stop offset="85%" stop-color="#c471ed" stop-opacity="0" />
        </linearGradient>
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="200" height="100"></rect>
</svg>

30.png

  • y1y2 相等,而 x1 和 x2 不同时,可创建水平渐变
  • x1x2 相等,而 y1 和 y2 不同时,可创建垂直渐变
  • x1x2 不同,且 y1 和 y2 不同时,可创建角形渐变

径向渐变

与线性渐变的用法类似,只不过是它是从一个点开始发散绘制渐变。我们看看一个径向渐变的例子:

<svg width="300" height="500">
    <defs>
        <radialGradient  id="test">
            <stop offset="5%" stop-color="#0f0c29" />
            <stop offset="55%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>

32.png

stop用法和线性渐变的用法是一样的,深蓝色现在正在向边缘的方向渐渐的变成灰白色。在线性渐变中我们可以控制渐变的方向。同样,径向渐变中也可以控制渐变的中心点位置。它的属性有cxcy、r、fxfy,分别代表的是圆形中心点位置,半径、渐变边缘的位置(范围0—1)。

<svg width="300" height="500">
    <defs>
        <radialGradient  id="test" cx="0" cy="0" r="0.5" fy="0.25" fx="0.25">
            <stop offset="0%" stop-color="#0f0c29" />
            <stop offset="100%" stop-color="#302b63" />
        </radialGradient >
    </defs>
    <rect fill="url(#test)" x="10" y="10" width="100" height="100"></rect>
</svg>

33.png

defs and use

在上面的例子,外面使用了defs标签包裹了linearGradient标签,那这个defs标签有什么作用呢?

defs 标签是 definitions 的缩写,它可对诸如渐变之类的特殊元素进行定义。

defs

它用于预定义一个元素使其能够在SVG图像中重复使用。在defs元素中定义的图形不会直接呈现。 你可以在你的视口的任意地方利用use标签呈现这些标签。

use

defs标签中定义的图形不会直接显示在SVG图像上此时需要使用use元素来引入它们渲染到页面。

一个简单的使用例子:

<svg width="300" height="300">
    <defs>
        <g id="copyme">
            <circle r="10"/>
          </g>
    </defs>
    <use x="10" y="10" xlink:href="#copyme" />
    <use x="50" y="10" xlink:href="#copyme" />
</svg>

31.png

最后

本篇文章讲述了在SVG中的如何在创建渐变,并引用到绘制的图形中,之后又扩展了defsuse标签相关知识,感谢你的阅读!

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanekjg
系列文章
更多 icon
同类精品
更多 icon
继续加载