前面的话

　　给SVG元素应用填充和描边，除了使用纯色和渐变外，还可以使用图案。本文将详细介绍SVG图案

概述

　　<pattern>可以实现重复的效果，在canvas中被翻译为模式，而在SVG中被翻译为图案或笔刷

　　SVG图案一般用于SVG图形对象的填充fill或描边stroke。这个图形可以是一个SVG元素，也可以是位图图像，通过<pattern>元素在x轴或y轴方向以固定的间隔平铺。

　　在pattern元素内部可以包含任何之前包含过的其它基本形状，并且每个形状都可以使用任何样式样式化，包括渐变和半透明

　　可以在<pattern>元素内定义图案，然后通过id引用

　　下面是一个简单的示例

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1"width=0.2 height=0.2>

        <circle cx="2" cy="2" r="2" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

尺寸设置

　　从上面的例子中，可以看出width和height是必须的属性，用来表示每一个图案在图形中占据的比例。如上所示，width、height值为0.25，则占据25%的比例，则每行可以有5个图案，每列也可以有5个图案

　　如果设置width、height值为0.5，则每行每列都有2个图案

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.5 height=0.5>

        <circle cx="2" cy="2" r="2" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

【图案内的图形尺寸】

　　如果对图案内的图形尺寸进行设置，将会显示出不同的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2>

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　下面例子中，则图案width、height值为0.2，即图形每行每列都包含5个图案。因此，每个图案的尺寸是10*10，而图案中的图形circle的半径为5，圆点为(5,5)，则正好可以放下一个圆

坐标系统

　　patternUnits，定义pattern的坐标系统。它的可能值有两个，userSpaceOnUse和objectBoundingBox

　　userSpaceOnUse:x、y、width和height表示的值都是当前用户坐标系统的值。也就是说，这些值没有缩放，都是绝对值

　　objectBoundingBox（默认值）:x、y、width和height表示的值都是外框的坐标系统（包裹pattern的元素）。也就是说，图案的单位进行了一个缩放，比如：pattern中为1的值，会变成和包裹元素的外框的width和height一样的大小

　　与渐变不同，pattern有第二个属性patternContentUnits，它描述了pattern元素基于基本形状使用的单元系统。它的可能值也有两个，userSpaceOnUse(默认值)和objectBoundingBox

　　[注意]patternContentUnits的默认值是userSpaceOnUse

　　下面是默认值的情况

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2 patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　如果使用patternUnits和patternContentUnits都使用objectBoundingBox，要保持原图案，则需要进行如下设置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2 patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">

        <circle cx="0.1" cy="0.1" r="0.1" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　如果使用patternUnits和patternContentUnits都使用userSpaceOnUse，要保持原图案，则需要进行如下设置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=10 height=10 patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　如果使用patternUnits使用userSpaceOnUse，patternContentUnits使用objectBoundingBox，要保持原图案，则需要进行如下设置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=10 height=10 patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">

        <circle cx="0.1" cy="0.1" r="0.1" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

位置设置

　　SVG图案使用x、y属性来进行位置设置。默认地，x、y属性为0，即图案从左上角开始绘制

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2 x=0 y=0  >

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　改变x、y的值，如设置为0.1，则从圆心处开始绘制

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2 x=0.1 y=0.1  >

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

　　如果使用userSpaceOnUse坐标系统，要保持原图案，则需要进行如下设置

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=10 height=10 x=5 y=5  patternUnits="userSpaceOnUse" >

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="#630" fill="url(#pattern1)"/>

</svg>

描边

　　当然了，图案pattern除了用于填充，还可以用于描边

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=20 height=20  patternUnits="userSpaceOnUse" >

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="url(#pattern1)" stroke-width="10"/>

</svg>

　　如果图案pattern的宽高设置的恰当，则会出现在边界线的两侧

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=10 height=10  patternUnits="userSpaceOnUse" >

        <circle cx="5" cy="5" r="5" stroke="none" fill="#393" />

      </pattern>

  </defs>

  <rect id="rect1" x="10" y="10" width="50" height="50" stroke="url(#pattern1)" stroke-width="10"/>

</svg>

使用图片

　　上次所有的实例中，都是使用SVG图形来创建图案。下面将使用一个图像作为SVG图案，该图像宽为50px，高为50px，是两个绿色的正方形组成的棋盘图案

　　这里使用了一个<image>元素，然后通过xlink:href属性引用图像

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2  >

        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=10 height=10></image>

      </pattern>

  </defs>

  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern1)" />

</svg>

图案引用

　　使用xlink:href属性，可以在SVG文档中引用另一个图案

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2>

        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=10 height=10></image>

      </pattern>

      <pattern id="pattern2" xlink:href="#pattern1" x=0.1>

      </pattern>

  </defs>

  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern2)" />

</svg>

　　可以通过在一个图案中的图形中引用另一个图案来实现图案嵌套的效果

<svg height="70" version="1.1" xmlns="http://www.w3.org/2000/svg" >

  <defs>

      <pattern id="pattern1" width=0.2 height=0.2>

        <image xlink:href="http://7xpdkf.com1.z0.glb.clouddn.com/runjs/img/wpid-pattern-50.png" width=2.5 height=2.5></image>

      </pattern>

      <pattern id="pattern2" width=0.2 height=0.2>

        <circle cx=5 cy=5 r=5 fill="url(#pattern1)"></circle>

      </pattern>

  </defs>

  <rect id="rect1" x="0" y="0" width="50" height="50" fill="url(#pattern2)" />

</svg>

SVG图案的更多相关文章

  1. SVG图案填充-Pattern

    SVG图案一般用于SVG图形对象的填充fill或描边stroke.这个图形可以是一个SVG元素,也可以是位图图像,通过<pattern>元素在x轴或y轴方向以固定的间隔平铺. <pa ...

  2. 如何给SVG填充和描边应用线性渐变

    给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...

  3. HTML5程序设计--SVG

    SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...

  4. 在 React、Vue项目中使用 SVG

    在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...

  5. 8款超好用的SVG编辑工具用起来

    随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...

  6. HTML躬行记（1）——SVG

    <svg>是矢量图的根元素,通过xmlns属性声明命名空间,从而告诉用户代理标记名称属于哪个XML方言.在下面的示例中,为<svg>元素声明了宽度和高度(默认以像素为单位),其 ...

  7. Trianglify - 生成五彩缤纷的 SVG 背景图案

    Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...

  8. Trianglify – 五彩缤纷的 SVG 背景图案

    Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...

  9. 7. svg学习笔记-图案和渐变

    之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...

随机推荐

  1. JARVIS 手机监控局域网内PC

    JARVIS 通过反向的Socket连接,实现通过手机(或任何可以发送Http请求的设备)对局域网内PC的监控.在外时可以远程监视家里PC任务的执行情况,甚至远程唤醒家里的PC提前打开游戏也可以实现( ...

  2. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  3. taskctl实现自定义mysql存储过程作业类型调用

    TASKCTL支持任意作业类型的扩展,但目前TASKCTL 4.1.3版本中并没有内置mysql存储过程的作业插件.通过介绍使TASKCTL支持调度mysql存储过程作业类型的步骤,一方面解决一些朋友 ...

  4. pwnable.kr random 之 write up

    ---恢复内容开始--- 首先看源代码: #include <stdio.h> int main(){ unsigned int random; random = rand(); // r ...

  5. Python爬虫从入门到放弃（二十）之 Scrapy分布式原理

    关于Scrapy工作流程回顾 Scrapy单机架构 上图的架构其实就是一种单机架构,只在本机维护一个爬取队列,Scheduler进行调度,而要实现多态服务器共同爬取数据关键就是共享爬取队列. 分布式架 ...

  6. Spring思维导图（一）

    关于Spring Spring是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用哪一个组件,同时为 J2EE 应用程序开发提供集成的框架 ...

  7. 【HTTP权威指南】第1 章　HTTP 概述

    1.1 HTTP--因特网的多媒体信使 ................................................................................ ...

  8. 【javascript】函数中的this详解 — 大家准备好瓜子，我要讲故事啦~~

       javascript中的this和函数息息相关,所以今天,我就给大家详细地讲述一番:javascript函数中的this   一谈到this,很多让人晕晕乎乎的抽象概念就跑出来了,这里我就只说最 ...

  9. linux 两个查找工具 locate，find详解

    linux 中有很多查找工具,今天主要讲解locate,find两个工具. 1.locate (1)查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意:如果这 ...

  10. Ext.NET加入自定义验证JS函数

    ExtJS验证很方便,在使用FormPanel的时候,我们可以很方便的进行验证.比如设置必填项.正则.字段类型等等.比如如下所示: 上面的验证是这么写的: 1 2 3 <Listeners> ...