pattern

<pattern>

该<pattern>元素定义了一个图形对象，该对象可以重复的x和y坐标间隔重新绘制（“平铺”）以覆盖区域。的<pattern>是通过引用的fill和/或stroke其他图形元素来填充或中风与引用的图案的那些元素的属性。

用法上下文

分类	容器元素
允许的内容	任意数量的下列元素，以任何顺序排列：动画元素描述元素图形元素结构元素渐变元素<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

属性

全局属性

Conditional processing attributes »

Core attributes »

Presentation attributes »

Xlink attributes »

class

style

externalResourcesRequired

viewBox

具体属性

patternUnits

patternContentUnits

patternTransform

width

height

xlink:href

preserveAspectRatio

DOM Interface

这个元素实现了SVGPatternElement接口。

例子

SVG

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">

  <defs>
    <pattern id="Triangle" width="10" height="10"
        patternUnits="userSpaceOnUse">
      <polygon points="5,0 10,10 0,10"/>
	</pattern>
  </defs>

  <circle cx="60" cy="60" r="50" fill="url(#Triangle)"/>
</svg>

结果

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<pattern>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<pattern>' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?