前面的话

　　给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. JStorm与Storm源码分析（二）--任务分配，assignment

    mk-assignments主要功能就是产生Executor与节点+端口的对应关系,将Executor分配到某个节点的某个端口上,以及进行相应的调度处理.代码注释如下: ;;参数nimbus为nimb ...

  2. 浅谈jQuery Pagination Ajax 分页插件的使用

    插件介绍 此插件是jQuery的ajax分页插件.分页切换时无刷新也无延迟,因为是一次性加载的.如果你用到此插件作分页的时候,涉及到的数据量大,建议不要使用此插件,因为加载慢会导致用户体验不好! 插件 ...

  3. dubbo-zookeeper(续)

    本篇为继上一篇的续篇,主要内容分为以下几点: 1.zookeeper集群 2.web管理平台 3.dubbo配置说明 接下来我们开始继续吧. 一.zookeeper集群 顾名思义也就是多台zookee ...

  4. 6步就能搞出个react网站哈，玩一把！

    1.安装mk-tools命令行工具   $ npm i -g mk-tools   2.创建空website   $ mk website myDemo $ cd myDemo    3.clone应 ...

  5. Android对话框和帧动画

    Android对话框 在一个例子中展示四种对话框. 设置四个按钮 <LinearLayout xmlns:android="http://schemas.android.com/apk ...

  6. caffe数据读取的双阻塞队列说明

    caffe的datareader类中 class QueuePair { public: explicit QueuePair(int size); ~QueuePair(); BlockingQue ...

  7. 深度学习：Keras入门(二)之卷积神经网络(CNN)

    说明:这篇文章需要有一些相关的基础知识,否则看起来可能比较吃力. 1.卷积与神经元 1.1 什么是卷积? 简单来说,卷积(或内积)就是一种先把对应位置相乘然后再把结果相加的运算.(具体含义或者数学公式 ...

  8. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

  9. 邻接表（C++）

    adj_list_network_edge.h // 邻接表网边数据类模板 template <class WeightType> class AdjListNetworkEdge { p ...

  10. Java 脚本引擎

    脚本引擎,就是一个编程语言的解释器,它的功能是解释执行用户的程序文本,将它译成计算机能执行的机器代码,完成一系列的功能. Java脚本引擎简单地说就是指Java提供的一组兼容操作各种脚本语言的的API ...