之前，我们仅仅使用纯色来为图形填充颜色和绘制轮廓，除此之外，我们还可以使用图案和渐变来填充图形或者是绘制轮廓。

图案

图案的效果类似于，在网页中给一个元素指定背景图像，当背景图像的尺寸小于元素的尺寸的时候，背景图片会默认重复以填充整个元素。效果如下：

要创建一个图案，首先就需要定义一个重复用的图形对象，这个图形对象被称作tile（瓷砖），tile可以是任意的svg图形元素，包括<image>引用的外部图片文件，然后将tile放在<pattern>元素中作为子元素，建议将<pattern>元素放在<defs>元素中，虽然将<pattern>元素直接放在<svg>中也可以，但<pattern>元素本来就不会再画布上显示，将其放置在<defs>元素中更加规范。

<pattern>元素的属性有id，x，y，width，height，patternUnits。id是必须的属性，id唯一的标识图案，用来在其他图案中引用。x和y指定图案左上角的x和y坐标，width和height的值为数值或是百分数或是0到1之间的小数，用于指定tile占据容器的宽度和高度，patternUnits指定填充的方式，取值为objectBoundingBox和userSpaceOnUse，当取值为objectBoundingBox时，width和height值必须为百分数或0到1之间小数，此时不管被填充容器的大小，水平重复tile的次数为1/width，竖直重复tile的次数为1/height；当取值为useSpaceOnUse时，width和height的值必须为数值，意为tile的宽和高，水平和竖直重复的tile的次数和父容器的宽高有关，示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg widht="300" height="300" style="border:1px solid #000">

        <defs>

            <pattern id="basic" x="0" y="0" width="8%" height="8%" patternUnits="objectBoundingBox">

                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>

            </pattern>

        </defs>

        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>

    </svg>

    <svg widht="300" height="300" style="border:1px solid #000">

        <defs>

            <pattern id="basic" x="0" y="0" width="20%" height="20%" patternUnits="objectBoundingBox">

                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>

            </pattern>

        </defs>

        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>

    </svg>

</body>

</html>

效果如下：

以上代码中我是用一个<ellipse>元素作为<pattern>元素的tile，在第一个svg中，我将<pattern>元素的patternUnits属性设置为objectBoundingBox，并将width和height设置为8%，所以在左边的图像中水平和竖直tile都重复了12.5次，但由于被填充容器的宽度不够，所以每个tile都只显示了一部分，而在第二个svg中，<pattern>元素的patternUnits属性依然设置为objectBoundingBox，但我将width和height设置为20%，容易看出，右边的图中有足够的空间填充tile，但是水平只填充了5个，竖直也填充了5个，这就是设置patternUnits为objectBoundingBox的填充特点。

示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg widht="300" height="300" style="border:1px solid #000">

        <defs>

            <pattern id="basic" x="0" y="0" width="30" height="25" patternUnits="userSpaceOnUse">

                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>

            </pattern>

        </defs>

        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>

    </svg>

    <svg widht="300" height="300" style="border:1px solid #000">

        <defs>

            <pattern id="basic" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">

                <ellipse cx="20" cy="15" rx="10" ry="7.5" stroke="blue"></ellipse>

            </pattern>

        </defs>

        <rect x="0" y="0" width="300" height="300" stroke="black" fill="url(#basic)"></rect>

    </svg>

</body>

</html>

效果：

以上代码中我将两个svg中<pattern>元素中的patternUnits属性都设置为userSpaceOnUse，

但第一个的width和height均比第二个大，svg水平显示的tile个数是被填充容器的宽度除以<pattern>的宽度得出来的，竖直方向上类似，第二个svg中<pattern>元素的宽度不足以显示整个tile，所以显示为半个。当patternUnits设置为userSpaceOnUse时，tile重复的次数与被填充容器的宽度和<pattern>的宽度有关。

<pattern>元素还有个patternContentUnits属性

图案还可以嵌套图案，例如在一个图案中使用的tile引用了另一个图案作为填充，当填充元素引用这个图案时就会显示出嵌套图案。

渐变

渐变有两种，线性渐变和径向渐变，svg中，线性渐变用linearGradient表示，径向渐变以radialGradient表示。

和在ps中创建渐变色一样，线性渐变中必须指定渐变点，渐变点中间的部分由计算机自动计算添加颜色，通过向<linearGradient>元素中添加子元素<stop>元素来添加渐变点，通过<stop>的offset属性指定渐变点相对于父容器的位置，设置stop-color属性指定渐变点的颜色，stop-opacity属性指定渐变点颜色的透明度。线性渐变默认的方向是从左到右，通过为linearGradient设置渐变的起点和终点坐标可以改变渐变的方向，起点的坐标属性名为x1和y1，终点的坐标属性名为x2和y2，值必须是从0%到100%的百分数或者是从0到1的小数。示例如下：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <defs>

            <linearGradient id="g1">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

            <linearGradient id="g2" x1="100%" y1="0%" x2="0%" y2="0%">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

            <linearGradient id="g3" x1="0%" y1="0%" x2="0%" y2="100%">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

            <linearGradient id="g4" x1="0%" y1="100%" x2="0%" y2="0%">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

            <linearGradient id="g5" x1="0%" y1="0%" x2="100%" y2="100%">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

            <linearGradient id="g6" x1="100%" y1="0%" x2="0%" y2="100%">

                <stop offset="0%" stop-color="#4bf0df" stop-opacity="1"/>

                <stop offset="33.3%" stop-color="#f0ea4b" stop-opacity="0.7"/>

                <stop offset="100%" stop-color="#f0724b" stop-opacity="0"/>

            </linearGradient>

        </defs>

        <rect x="0" y="0" width="200" height="50" stroke="black" fill="url(#g1)"></rect>

        <rect x="0" y="50" width="200" height="50" stroke="black" fill="url(#g2)"></rect>

        <rect x="0" y="100" width="200" height="50" stroke="black" fill="url(#g3)"></rect>

        <rect x="0" y="150" width="200" height="50" stroke="black" fill="url(#g4)"></rect>

        <rect x="0" y="200" width="200" height="50" stroke="black" fill="url(#g5)"></rect>

        <rect x="0" y="250" width="200" height="50" stroke="black" fill="url(#g6)"></rect>

    </svg>

</body>

</html>

效果如下：

以上的渐变方向依次是从左到右，从右到左，从上到下，从下到上，从左上角到右下角，从右上角到左下角，渐变的方向其实就是<linearGradient>元素的x1，y1和x2，y2两点之间的直线方向。

我们上面创建的渐变都是从0%到100%的，如果是从10%到90%会出现什么情况：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <defs>

            <linearGradient id="g1">

                <stop offset="10%" stop-color="#f666cc"></stop>

                <stop offset="90%" stop-color="#e366f6"></stop>

            </linearGradient>

            <linearGradient id="g2">

                <stop offset="10%" stop-color="red"></stop>

                <stop offset="90%" stop-color="green"></stop>

            </linearGradient>

            <linearGradient id="g3">

                <stop offset="30%" stop-color="red"></stop>

                <stop offset="60%" stop-color="green"></stop>

            </linearGradient>

        </defs>

        <rect x="0" y="0" width="200" height="100" fill="url(#g1)"></rect>

        <rect x="50" y="100" width="200" height="100" fill="url(#g2)"></rect>

        <rect x="100" y="200" width="200" height="100" fill="url(#g3)"></rect>

    </svg>

</body>

</html>

效果如下：

首先，讲一下上述的代码，第一个渐变的位置为从10%到90%，第二个也是从10%到90%，第三个是30%到60%，如果第一个图像不太明显，那么看第二个两个反色，如果实在看不出来看第三个总能明白了吧，svg中不在渐变范围的颜色默认以最靠近的渐变点的颜色填充。

也就是说在第三个图像中，从0%到30%以红色填充，30%到60%为红色到绿色的渐变，60%到100%为绿色填充。在线性渐变<linearGradient>元素中有个spreadMethod属性，它专门管这个情况，有三个值，分别是pad（起始和结束渐变点会扩展到对象的边缘），repeat（渐变会重复起点到终点的过程，直到填充满整个对象），reflect（渐变会按终点到起点，起点到终点的排列重复，直到填充满整个对象）。

好，废话一大堆，终于说完了svg中的线性渐变(⊙﹏⊙)b，线性渐变明白了，径向渐变就简单的多了，径向渐变就是指定一个中心点，渐变以圆形的方式向外渐变，在svg中以<radialGradient>表示，属性 cx和cy表示渐变中心的坐标，r表示渐变半径，取值均是是从0%到100%的百分数或者是从0到1的小数，默认值均为50%。向<radialGradient>中添加渐变点的方式和径向渐变完全一致，此处不说了（口干舌燥┗( T﹏T )┛┗( T﹏T )┛），径向渐变也有spreadMethod属性，设置方式和线性渐变一致~致~致~~~~

看示例：

<!DOCTYPE html>

<html>

<head>

    <title>SVG</title>

</head>

<body>

    <svg width="300" height="300" style="border:1px solid #000">

        <defs>

            <radialGradient id="g1">

                <stop offset="0%" stop-color="#e366f6"></stop>

                <stop offset="50%" stop-color="#66f6ee"></stop>

                <stop offset="100%" stop-color="#8ff666"></stop>

            </radialGradient>

            <radialGradient id="g2" r="100%">

                <stop offset="0%" stop-color="#e366f6"></stop>

                <stop offset="50%" stop-color="#66f6ee"></stop>

                <stop offset="100%" stop-color="#8ff666"></stop>

            </radialGradient>

            <radialGradient id="g3" cx="0" cy="0" r="100%">

                <stop offset="0%" stop-color="#e366f6"></stop>

                <stop offset="50%" stop-color="#66f6ee"></stop>

                <stop offset="100%" stop-color="#8ff666"></stop>

            </radialGradient>

        </defs>

        <rect x="50" y="0" width="200" height="100" fill="url(#g1)"></rect>

        <rect x="50" y="100" width="200" height="100" fill="url(#g2)"></rect>

        <rect x="50" y="200" width="200" height="100" fill="url(#g3)"></rect>

    </svg>

</body>

</html>

效果：

7. svg学习笔记-图案和渐变的更多相关文章

  1. 8. svg学习笔记-文本

    毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" ...

  2. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  3. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  4. svg的基本图形与属性【小尾巴的svg学习笔记1】

    因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删. 一.基本图形 1.矩形 x,y定义矩形的左上角坐标: width,height定义矩形的长度和宽度: rx,ry定义矩形的圆角半径 ...

  5. svg学习笔记（一）

    SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150 ...

  6. svg学习笔记（二）

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  7. svg学习笔记

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  9. 9. svg学习笔记-裁剪和蒙版

    裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...

随机推荐

  1. 1.Magicodes.NET框架之路——起航

    1.Magicodes.NET框架之路--起航 前言 从事开发也好几年了,并且最近一直在做架构搭建的工作.这些时间,最大的感悟就是: 只有自己理解了的才是自己的. 对架构这块,若欲立之,必先破之. 故 ...

  2. 里氏替换原则(LSP)

    替换原则由MIT计算机科学实验室的Liskov女士在1987年的OOPSLA大会上的一篇文章中提出,主要阐述有关继承的一些原则,故称里氏替换原则. 2002年,Robert C.Martin出版了一本 ...

  3. [转]Memcache的使用和协议分析详解

    Memcache是什么 Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力. 它可以应 ...

  4. Python爬虫的N种姿势

    问题的由来   前几天,在微信公众号(Python爬虫及算法)上有个人问了笔者一个问题,如何利用爬虫来实现如下的需求,需要爬取的网页如下(网址为:https://www.wikidata.org/w/ ...

  5. [转]从minio中读取文件流进行下载文件

    本文转自:https://blog.csdn.net/ZHANGLIZENG/article/details/82892678 一.获取Minio连接    public static String ...

  6. Java高并发--安全发布对象

    Java高并发--安全发布对象 主要是学习慕课网实战视频<Java并发编程入门与高并发面试>的笔记 发布对像:使一个对象能够被当前范围之外的对象使用. 对象逸出:一种错误的发布.当一个对象 ...

  7. python进程基础

    目录 进程以及状态 1. 进程 2. 进程的状态 进程的创建-multiprocessing 1. 创建进程 2. 进程pid 3. Process语法结构如下 4. 给子进程指定的函数传递参数 5. ...

  8. 异步是javascript的精髓

    最近做了一个智能家居的APP,目前纯JS代码已经4000多行,不包括任何引入的库.还在不断升级改造中...这个项目到处都是异步.大多数都是3-4层调用.给我的感觉就是异步当你习惯了,你会发现很爽.下面 ...

  9. laravel5.1 ajax post传值_token

    laravel框架中只要是涉及到post传值都需要传 _token ,这是框架中为了防止crsf攻击所做的安全措施,那么我们用到ajax中的post 方式传值时,也需要在所传数据中添加一个_token ...

  10. 一些你可能不熟悉的JS知识点总结

    js代码暂时性死区 只要块级作用域存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响.这么说可能有些抽象,举个例子: ? 1 2 3 4 5 var temp = 123; if(tr ...