<pattern>
要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます.
<pattern>
は他のgraphics elementsのfill
またはstroke
属性として参照されることが可能です.
html,body,svg { height:100% }
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
属性
height
- This attribute determines the height of the pattern tile.
Value type: <length>|<percentage>; Default value:0
; Animatable: yes href
- This attribute reference a template pattern that provides default values for the
<pattern>
attributes.
Value type: <URL>; Default value: none; Animatable: yes patternContentUnits
- This attribute defines the coordinate system for the contents of the
<pattern>
.
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:userSpaceOnUse
; Animatable: yesNote: This attribute has no effect if a
viewBox
attribute is specified on the<pattern>
element. patternTransform
- This attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.
Value type: <transform-list>; Default value: none; Animatable: yes patternUnits
- This attribute defines the coordinate system for attributes
x
,y
,width
andheight
.
Value type:userSpaceOnUse
|objectBoundingBox
; Default value:objectBoundingBox
; Animatable: yes preserveAspectRatio
- This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
Value type: (none
|xMinYMin
|xMidYMin
|xMaxYMin
|xMinYMid
|xMidYMid
|xMaxYMid
|xMinYMax
|xMidYMax
|xMaxYMax
) (meet
|slice
)? ; Default value:xMidYMid meet
; Animatable: yes viewBox
- This attribute defines the bound of the SVG viewport for the pattern fragment.
Value type: <list-of-numbers> ; Default value: none; Animatable: yes width
- This attribute determines the width of the pattern tile.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes x
- This attribute determines the x coordinate shift of the pattern tile.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes xlink:href
非推奨 SVG 2- This attribute reference a template pattern that provides default values for the
<pattern>
attributes.
Value type: <URL>; Default value: none; Animatable: yesNote: For browsers implementing
href
, if bothhref
andxlink:href
are set,xlink:href
will be ignored and onlyhref
will be used. y
- This attribute determines the y coordinate shift of the pattern tile.
Value type: <length>|<percentage> ; Default value:0
; Animatable: yes
グローバル属性
- Core Attributes
- Most notably:
id
,tabindex
- Styling Attributes
class
,style
- Conditional Processing Attributes
- Most notably:
requiredExtensions
,systemLanguage
- Presentation Attributes
- Most notably:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink Attributes
- Most notably:
xlink:title
Usage notes
カテゴリー | コンテナー要素 |
---|---|
許可された内容 | 任意の数、任意の順で以下の要素を配置可能: アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、 <altGlyphDef> 、 <clipPath> 、 <color-profile> 、 <cursor> 、 <filter> 、 <font> 、 <font-face> 、 <foreignObject> 、 <image> 、 <marker> 、 <mask> 、 <pattern> 、 <script> 、 <style> 、 <switch> 、 <text> 、 <view> |
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 <pattern> の定義 |
勧告候補 | |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) <pattern> の定義 |
勧告 | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.