<pattern>

<pattern>要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます.

<pattern>は他のgraphics elementsfillまたはstroke属性として参照されることが可能です.

<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: yes

Note: 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 and height.
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: yes

Note: For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href 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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
patternChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
heightChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
hrefChrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 9WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS 完全対応 9Samsung Internet Android ?
patternContentUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 3WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
patternTransformChrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 3WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
patternUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari 完全対応 3WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS 完全対応 3Samsung Internet Android ?
widthChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
xChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
xlink:href
非推奨
Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
yChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari 完全対応 3WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。