【前端SVG】线性渐变、径向渐变
前言
在
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>
我们在画布中创建一个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"/>
使用渐变需要在图形标签上使用stroke
、fill
进行引用,使用url
引用元素的方式将渐变的ID值传入即可。(stroke
也是同样操作)
linearGradient
标签中你还可以定义渐变的开始和结束位置。它们分别是x1
、x2
、y1
、y2
。默认是水平渐变的,可以通过修改这些属性来改变渐变的方向,下面看看垂直渐变的例子:
<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>
- 当
y1
和y2
相等,而 x1 和x2
不同时,可创建水平渐变 - 当
x1
和x2
相等,而 y1 和y2
不同时,可创建垂直渐变 - 当
x1
和x2
不同,且 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>
stop
用法和线性渐变的用法是一样的,深蓝色现在正在向边缘的方向渐渐的变成灰白色。在线性渐变中我们可以控制渐变的方向。同样,径向渐变中也可以控制渐变的中心点位置。它的属性有cx
、cy
、r、fx
、fy
,分别代表的是圆形中心点位置,半径、渐变边缘的位置(范围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>
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>
最后
本篇文章讲述了在SVG
中的如何在创建渐变,并引用到绘制的图形中,之后又扩展了defs
和use
标签相关知识,感谢你的阅读!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekjg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24