SVG图案 - 秒客网

前面的话

　　给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图案的更多相关文章

SVG图案填充-Pattern
SVG图案一般用于SVG图形对象的填充fill或描边stroke.这个图形可以是一个SVG元素,也可以是位图图像,通过<pattern>元素在x轴或y轴方向以固定的间隔平铺. <pa ...
如何给SVG填充和描边应用线性渐变
给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线 ...
HTML5程序设计--SVG
SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言. 借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时 ...
在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
8款超好用的SVG编辑工具用起来
随着响应式网页的发展,对于内容呈现的要求也越来越高,尤其是图像.为了在各种设备上能实现自然伸缩或扩展而不影响图片质量,所以矢量图形(SVG)正变得越来越受欢迎. 大家都知道,在计算机图形学中,有两种主 ...
HTML躬行记（1）——SVG
<svg>是矢量图的根元素,通过xmlns属性声明命名空间,从而告诉用户代理标记名称属于哪个XML方言.在下面的示例中,为<svg>元素声明了宽度和高度(默认以像素为单位),其 ...
Trianglify - 生成五彩缤纷的 SVG 背景图案
Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...
Trianglify – 五彩缤纷的 SVG 背景图案
Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3 ...
7&period; svg学习笔记-图案和渐变
之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...

随机推荐

解决宿主机不能访问虚拟机CentOS中的站点 | 更新CentOS防火墙设置开启80端口访问
前阵子在虚拟机上装好了centos6.0,并配好了nginx+php+mysql,但是本机就是无法访问.一直就没去折腾了. 具体情况如下 1.本机能ping通虚拟机 2.虚拟机也能ping通本机 3. ...
分布式缓存技术redis学习系列（三）——redis高级应用（主从、事务与锁、持久化）
上文<详细讲解redis数据结构(内存模型)以及常用命令>介绍了redis的数据类型以及常用命令,本文我们来学习下redis的一些高级特性. 安全性设置设置客户端操作秘密 redis安装 ...
oracle 卸载和安装
第一步:在“服务”窗口中停止与oracle有关的所有服务第二步:卸载Oracle软件 “所有程序——oracle 安装目录——oracle 安装产品——Universal Installer” 第三 ...
Windows 数据类型
类型定义描述 ATOM typedef WORD ATOM; 原子(原子表中的一个字符串的参考) BOOL typedef int BOOL; 布尔变量 BOOLEAN typedef BYTE ...
为UITextView添加与UITextField一样的边框——UITextField默认边框颜色、宽度、圆角
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3789052.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...
C/C++中的隐式类型转换
代码: #include <iostream> #include <cstdio> using namespace std; int main(int argc,char* a ...
Codeforces 712B
B. Memory and Trident time limit per test:2 seconds memory limit per test:256 megabytes input:standa ...
机器学习，流式IoT和医疗设备互联
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 让我们来看一下机器学习是如何应用于医护行业以及如何借助Apache Spark对患者的监控数据进行处理现如今,IoT数据,实时流式数据分析 ...
spring-AOP之通知和顾问
通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...
Python3 解析excel文件
Python3 解析读取excel文件一.第三方库 import xlrd 二.代码示例 import xlrd ''' 读取Excel每个sheet的第一列和第二列的值,拼接成json串,写入文件 ...