SVG pattern 使用（patternUnits、patternContentUnits）

一、简介

• <pattern> 是 SVG 的一个图案填充标签，可以在 pattern 中定义好图案，然后通过 id 引用来对某个图形进行填充
  
• <pattern> 的 width / height 属性默认是根据所填充图形的百分比来确定的。
  

二、属性

• pattern标签另外的两个属性为：

• patternUnits：默认值为 objectBoundingBox
  
• patternContentUnits：默认值为 userSpaceOnUse
  一般用来设置 pattern 内图案的单位大小，如下面实例中的 circle、polygon。
  

• Units的取值范围：

• userSpaceOnUse：
  x、y、width和height表示的值都是当前用户坐标系统的值。也就是说，这些值没有缩放，都是绝对值。
  
• objectBoundingBox(默认值)：
  x、y、width和height的值都是占外框（包裹 pattern 的元素）的百分比。
  

三、案例

• 案例代码

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
    <defs>
      <pattern id="p1" x="0" y="0" width="0.2" height="0.2">
        <circle cx="10" cy="10" r="5" fill="red" />
        <polygon points="30 10 60 50 0 60" fill="green" />
      </pattern>
    </defs>
    <rect x="0" y="0" width="300" height="200" fill="url(#p1)" stroke="blue" />
</svg>

• 案例效果
  
  
•