学习SVG（七）图案和渐变填充

简介

在SVG中图形的填充和轮廓除了使用纯色，还可以使用图案和渐变。

图案填充

图案填充需要使用patterns元素，填充类型之一。
patternUnits属性设置图案如何排列。默认值objectBoundingBox。

使用objectBoundingBox，图案的大小基于要填充对象的大小计算。

    <svg width="400" height="400"><defs><pattern id="pa" x="0" y="0" patternUnits="objectBoundingBox" width="20%" height="20%"><path d="M 0 0 h 20 v 20 h -20 z" style="stroke: black; fill: none"></path></pattern></defs><rect width="100" height="100" stroke="#aaa" fill="url(#pa)" /><rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" /></svg>

1.2 设置了宽高20%。在图案中绘制了一个20px的正方形。第一个图20%小于20px正方形被截取，然后平铺图案。第二个图20%大于20px，图案变大，然后平铺图案。

使用userSpaceOnUse属性根据width和height制定图案。

  <pattern id="pa" x="0" y="0" patternUnits="userSpaceOnUse" width="40" height="40"><path d="M 0 0 h 40 v 40 h -40 z" style="stroke: black; fill: none"></path><path d="M 20 22 A 5 10 -45 1 0 20 34" fill="#aaa" /><path d="M 20 22 A 5 10 45 1 1 20 34" fill="#aaa" /></pattern><rect fill="url(#pa)" stroke="black" x="0" y="0" width="200" height="200" />

2.2 根据设置的width和height生成图案后平铺。

patternContentUnits属性设置图案中图形宽高使用什么类型。默认值userSpaceOnUse。

userSpaceOnUse 使用默认坐标类型px设置图案的大小。
objectBoundingBox 使用百分比来设置图案的大小。

      <defs><patternid="pa"x="0"y="0"width=".2"height=".2"patternUnits="objectBoundingBox"patternContentUnits="objectBoundingBox"><path d="M 0 0 h 0.2 v 0.2 h -0.2z" style="stroke: black; stroke-width: 0.01; fill: none"></path></pattern></defs><rect width="100" height="100" stroke="#aaa" fill="url(#pa)" /><rect x="110" width="200" height="200" stroke="#aaa" fill="url(#pa)" />

2.1 能看见图案中的正方形也是百分比计算的。

渐变色填充

linearGradient 线性渐变，一系列颜色沿着一条直线过渡，在特定的位置指定想要的颜色。
属性:

x1,y1 渐变的起点位置，使用百分比表示，默认的渐变方向是从左到右。
x2,y2 渐变的终点位置，使用百分比表示。
spreadMethod 设置渐变填充方式。

      <defs><linearGradient id="linear" x1="100%" y2="100%"><stop offset="0%" style="stop-color: #ffcc00"></stop><stop offset="100%" style="stop-color: #0099cc"></stop></linearGradient></defs><rect x="10" y="10" width="200" height="100" fill="url(#linear)"></rect>

radialGradient 径向渐变，每个渐变点是一个圆形路径，从中心点向外扩散。
属性:

cx,cy,r 定义渐变的范围，测量半径的单位是对象的宽高均值。默认值50%。
fx,fy 0%点所处的圆路径的圆心。
spreadMethod 设置绘制范围没有到达图形边缘的情况。

      <defs><radialGradient id="rad" cx="0%" cy="0%" r="60%"><stop offset="0%" style="stop-color: #f96" /><stop offset="50%" style="stop-color: #9c9" /><stop offset="100%" style="stop-color: #906" /></radialGradient><radialGradient id="pad" xlink:href="#rad" spreadMethod="pad" /><radialGradient id="repeat" xlink:href="#rad" spreadMethod="repeat" /><radialGradient id="reflect" xlink:href="#rad" spreadMethod="reflect" /></defs><rect x="10" y="10" width="100" height="100" fill="url(#pad)" /><rect x="10" y="120" width="100" height="100" fill="url(#repeat)" /><rect x="10" y="230" width="100" height="100" fill="url(#reflect)" />

stop元素，设置渐变点。

offset属性，指定渐变点位置。取值范围0%-100%。
stop-color属性，对应offset位置点的颜色。
stop-opacity属性，对应offset位置点的不透明度。

学习SVG（七）图案和渐变填充相关推荐

SVG图案和渐变填充
在基本图形绘制中,我们只用了纯色为图形对象填充颜色和绘制轮廓.其实,出来纯色以外,我们还可以使用图案和渐变来填充图形或者绘制图形轮廓. 一.图案填充: 我们首先来看图案填充,要使用图案,首先要定义一个 ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
html中如何设置图片填充颜色渐变,实现SVG图标的渐变填充效果
2016年我写过一篇文章如何使用SVG图标,其"试验性部分"的结语是个警告 - "抱歉,渐变填充无法工作". 我指的是像fill: linear-gradien ...
计算机word设置渐变填充,在word2013中设置渐变填充效果的详细设置步骤
软件安装:装机软件必备包装机软件必备包官方下载关于电脑装机必须的软件,比如windows office系列办公软件.网页浏览器.杀毒软件.安全防护软件.刻录软件.压缩软件. ...
从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
OpenCV示例学习（七）：离散傅里变换（DFT）算子：getOptimalDFTSize(),copyMakeBorder(),magnitude(),log(),normalize()
OpenCV示例学习(七):离散傅里变换(DFT)算子:getOptimalDFTSize(),copyMakeBorder(),magnitude(),log(),normalize() #incl ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
计算机word设置渐变填充,Word中鲜为人知的渐变效果设置
Word中鲜为人知的渐变效果设置方法带给大家,通常我们通道最多的就是在ps中制作图片的时候使用渐变的方法,相信很多人并不知道Microsoft Word软件中其实也具有为图形设置渐变颜色的功能吧,小编 ...
cdr圆形渐变填充怎么设置_玩出新花样|渐变应用于形状
生活不可能像你想象得那么好,但也不会像你想象得那么糟. 我觉得人的脆弱和坚强都超乎自己的想象. 有时,我可能脆弱得一句话就泪流满面:有时,也发现自己咬着牙走了很长的路. --莫泊桑<一生> ...

学习SVG（七）图案和渐变填充

简介

图案填充

渐变色填充

学习SVG（七）图案和渐变填充相关推荐

最新文章

热门文章