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>
时间： 2024-11-08 19:13:49

SVG图案的相关文章

Html5添加SVG生成图案花纹背景样式的js插件教程

一.使用方法 由于Textures.js是基于d3.js的,所以必须引入d3.js文件,同时引入textures.min.js文件. <script src="js/d3.min.js" charset="utf-8"></script> <script src="js/textures.min.js" charset="utf-8"></script> 二.Html结构 该SV

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

给SVG元素应用填充和描边有三种方法(戳这里学习SVG填充和描边的相关内容).你可以使用纯色.图案或渐变.前面两种方法我们之前已经讲过了,现在我们来讨论第三种方法——渐变. SVG提供了两种渐变——线性.径向.我今天先讲线性渐变,下篇我们再看看径向渐变. SVG线性渐变 如果你看过这系列的SVG之前的文章,你应该对这里渐变的很多概念都比较熟悉啦.在<defs>中定义,然后在后面把它们作为填充或描边来引用. 我们使用<linearGradient>元素来定义线性渐变.我们从一个简单的

在 React、Vue项目中使用 SVG

在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再进行裁切展示. 而实际上,这些简单的小图标完全没必要让美工来做,前端完全可以通过 svg使用代码把这些简单的图标画出来,并且,因为这些图标是用代码描述出来的,所以如果想要修改这些图标,例如改变图标的颜色.图标的形状.大小等,都只是改几行代码的事情,非常简单,根本无需美工返工重做. 本文不是阐述如何利

纹理文本

前面的话 本文将通过多种方式实现纹理文本的效果 背景裁切 对于实现纹理文本的效果,脑海中最直接能想到的办法可能是背景裁切background-clip 使用线性渐变来填充文本背景 <style> .box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 70%), hsl(320, 100%, 50%)); -webkit-text-fill-color: transparent; -webkit-backg

4个另你爱不释手的神奇设计酷站

一款高颜值纹理网站:The Pattern Library 哈哈哈发现了一个超高颜值在线下载纹理背景的网站,特别特别好玩儿!各种风格的都有!可以一张一张翻看,也可以点击右边最下方的浏览按钮,就可以浏览全部纹理了.网站素材均免费下载,下载下来的素材默认是png格式的四方连图案,上下左右都是彼此连在一起的,这是作为纹理常用的一种方式.下载完后就到了大展你ps技能的时候啦,哈哈哈,不用担心,特别简单!在ps里将它不断复制合并在一起,或是直接存成图案去平铺显示,就能无缝连接成为纹理效果,并且想多大就多大

SVG.js 图案使用和use引用

一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.pattern(20, 20, function (add) { add.rect(20, 20).fill('#f06'); add.rect(10, 10); add.rect(10, 10).move(10, 10); }); //获取url的标识对象,returns 'url(#SvgjsPatte

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

Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染.它还包括 colorbrewer 调色板库,让您快速启动和运行.

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

Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景.它的灵感来自于 Btmills 的 Geopattern,并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染.它还包括 colorbrewer 调色板库,让您快速启动和运行. 立即下载     在线演示 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的

SVG渐变

前面的话 给SVG元素应用填充和描边,除了使用纯色外,还可以使用渐变.本文将详细介绍SVG渐变 线性渐变 有两种类型的渐变:线性渐变和径向渐变.必须给渐变内容指定一个id属性,否则文档内的其他元素不能引用它.为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面 线性渐变沿着直线改变颜色,要插入一个线性渐变,需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点 <svg height="70" v