SVG参考手册
分类 | Elements
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
x
y
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) |
? |
? |
? |
? |
加载中,请稍侯......