您的位置:首页> HTML5教程> SVG教程

SVG <pattern>

2019-1-28 00:31| 作者: admin| 查看: 818| 评论: 0|来自: 蚂蚁部落

<pattern>元素可以预定义一个图案,以固定间隔对指定区域在x轴和y轴上进行填充。

此图案可以对SVG元素进行填充或者描边操作,有点类似于CSS中背景图片的重复填充操作。

要明确一点,<pattern>元素本身并不可见,它用来预定义或者组织图案,其他元素引用后才会显示。

应用非常简单,如果说有难点,主要在坐标系相关属性的应用,可以预先参阅如下两篇文章:

(1).SVG viewprot 视窗和画布一章节。

(2).SVG 坐标系统一章节。

通过fill或者stroke属性可以引用图案对指定元素进行填充和描边,下面仅以填充为例子。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  width:400px;
  height:240px;
  border:2px solid red;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="20" y="20"
        width="40" height="40"
        patternUnits="userSpaceOnUse">
   
        <circle 
          cx="20" cy="20"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="20" y="20"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
  </svg>                         
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003205twaup6pwsx2paksw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面首先对代码进行一下简述,后续再对属性进行详细分析:

(1).再强调一次,<pattern>元素本身并不会显示,它是用来预定义图案。

(2).在<pattern>元素内定义一个圆形图案,以备以后应用。

(3).最后矩形元素<rect>通过fill属性引用图案,对齐进行填充操作。

特别说明:<pattern>元素可以创建一个独立的坐标系统,内部元素位于此坐标系中。

上面代码绘制的圆就位于<pattern>创建的坐标系统中,然后在此坐标系中以(20,20)为中心,20为半径绘制圆,也就是在<pattern>元素的正中心绘制一个圆形,再来看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:240px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="20" y="20"
        width="40" height="40"
        patternUnits="userSpaceOnUse">
  
        <circle 
          cx="0" cy="0"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="20" y="20"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
    <circle 
      cx="20" cy="20"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003239uhby565qt95ybyla.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码是为了证明<pattern>元素能够创建一个独立坐标系,其内部元素以此坐标系定位。

(1).具有透明度的绿色的圆是一个辅助图形,便于观察。

(2).<pattern>元素内部圆的圆心坐标是(0,0)。

(3).如果<pattern>元素能够创建一个独立的坐标系,那么(0,0)位置就是<pattern>元素的左上角。

(4).于是就绘制了四分之一圆形,也就是实现上述填充效果。

一.x与y属性:

<pattern>元素的x与y属性用于规定图案第一次填充开始的坐标。

当然这个坐标是以<pattern>元素所在的坐标系为标准,上述代码中,四分之一个圆从(20,20)处开始填充。

二.width与height属性:

这两个属性非常简单,用于设置<pattern>元素的宽度和高度,不再进行演示。

特别说明:设置<pattern>元素的尺寸不会影响其内部元素的尺寸。

三.patternUnits属性:

patternUnits由pattern和unit两个单词合成。

由此可以大致猜测出此属性用于规定<pattern>元素使用的尺寸单位。

恰如其名,此属性用于规定<pattern>元素尺寸的参考系。

具有两个属性值,分别如下:

1.userSpaceOnUse:

(1).规定<pattern>使用的参考系为引用<pattern>的元素所在的当前用户坐标系。

(2).<pattern>元素的x、y、width和height属性的值都是绝对值。

2.objectBoundingBox(默认值):

(1).规定<pattern>使用的参考系为引用<pattern>的元素所生成的包围盒。

(2).<pattern>元素的x、y、width和height属性的值是介于0-1之间的相对值,也可以是百分比形式。

第二个属性比第一个稍微抽象一点,下面单独对其进行一下演示,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:260px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0.1" y="0.1"
        width="0.2" height="0.2"
        patternUnits="objectBoundingBox">
   
        <circle 
          cx="20" cy="20"
          r="20"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="40" y="40"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
   
    <circle 
      cx="40" cy="40"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003325cb8hbbqzg800oy0g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).patternUnits属性值设置为"objectBoundingBox",可以省略,因为是默认值。

(2).此时,<pattern>以它包围盒为参考系,也就是引用它的元素,在这里是<rect>元素。

(3).<pattern>元素的x、y、width和height属性的值都是以<rect>元素生成的盒为参考,值介于0-1之间。

(4).x="0.1",那么它的实际值就是0.1乘以<rect>元素的宽度,也就是0.1*200=20,y也是同样的道理,实际值也是20,于是图案第一次填充开始的坐标是(20,20)。

(5).对于width和height属性也是同样的道理,它的尺寸以<rect>的尺寸为参考,实际尺寸分别为40。

(6).所以,图案的长宽都是40,图片的起始填充位置距离矩形元素左上侧都(20,20)坐标处。

四.patternContentUnits属性:

此属性功能与patternUnits类似,属性值完全相同。

patternContentUnits规定<pattern>所包裹内部元素使用的尺寸参考系。

此属性的默认值是userSpaceOnUse,与patternUnits属性恰好相反。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:300px;
  height:260px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0.1" y="0.1"
        width="0.2" height="0.2"
        patternUnits="objectBoundingBox"
        patternContentUnits="objectBoundingBox">
   
        <circle 
          cx="0.1" cy="0.1"
          r="0.1"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="40" y="40"
      width="200" height="200"
      stroke="green"
      fill="url(#pattern)"/>
   
    <circle 
      cx="40" cy="40"
      r="20"
      stroke="none"
      fill-opacity="0.5"
      fill="green" />
  </svg>                         
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201901/28/003354qge29xgmjgj1evjo.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).patternContentUnits值为objectBoundingBox时,<pattern>内部元素尺寸以引用<pattern>的元素的尺寸为参考,例如cr="0.1",那么cr的实际值是0.1乘以200。特别说明,只能使用小数,而不能使用百分数。

(2).patternContentUnits值为userSpaceOnUse时,尺寸参考引用<pattern>的元素,都是绝对值。

(3).无论patternContentUnits是何值,内部元素定位都是以<pattern>元素为参考。

(4).<pattern>元素声明viewbox属性,那么patternContentUnits="objectBoundingBox"无效。

五.patternTransform属性:

利用此属性可以对图案进行变换,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  border: 1px solid red;
  width:800px;
  height:650px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <pattern 
        id="pattern"
        x="0" y="0"
        width="0.2" height="0.2"
        patternTransform="rotate(10)"
        patternUnits="objectBoundingBox">
  
        <circle 
          cx="40" cy="40"
          r="40"
          stroke="none"
          fill="blue"/>
      </pattern>
    </defs>
    <rect 
      x="33" y="33"
      width="400" height="400"
      stroke="green"
      fill="url(#pattern)"/>
  </svg>                         
</body>
</html>

属性值可以是一个变换列表,变换之间用空格分隔,代码片段如下:

[XML] 纯文本查看 复制代码
<pattern 
    id="p1" 
    width=".25" height=".25"
    patternTransform="rotate(20)
                       skewX(30)
                       scale(1 0.5)">
    <circle 
      cx="10" cy="10" 
      r="10" />
  </pattern>

关于变换可以参阅本版块其他相关文章,本文不多介绍。


鲜花

握手

雷人

路过

鸡蛋
返回顶部