<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

<pattern> 要素は、ある領域をカバーするために、x座標とy座標の間隔を繰り返して (「タイル」) 再描画することができるグラフィックオブジェクトを定義します。

<pattern> は、他のグラフィック要素fillstroke 属性から参照され、参照されたパターンでそれらの要素を埋めたり、描いたりします。

html
<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

この属性はパターンタイルの高さを指定します。 値の型: <length>|<percentage>; 既定値: 0; アニメーション:

href

この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション:

patternContentUnits

この属性は <pattern> の内容物の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox; 既定値: userSpaceOnUse; アニメーション:

メモ: この属性は、viewBox 属性が <pattern> 上に指定された場合は効果がありません。

patternTransform

この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 値の型: <transform-list>; 既定値: none; アニメーション:

patternUnits

この属性は x, y, width, height の各属性の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox; 既定値: objectBoundingBox; アニメーション:

preserveAspectRatio

この属性は、SVG フラグメントが異なるアスペクト比を持つコンテナーに埋め込まれた場合に、どのように変形させなければならないかを定義します。 値の型: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; 既定値: xMidYMid meet; アニメーション:

viewBox

この属性は、パターンフラグメントの SVG ビューポートの境界を定義します。 値の型: <list-of-numbers> ; 既定値: none; アニメーション:

width

この属性はパターンタイルの幅を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

x

この属性はパターンタイルの x 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

xlink:href 非推奨;

この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション:

メモ: href を実装しているブラウザーでは、 hrefxlink:href を共に設定した場合、xlink:href は無視され href のみが使用されます。

y

この属性はパターンタイルの y 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション:

グローバル属性

利用メモ

カテゴリーコンテナー要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素
グラデーション要素
図形要素
構造的要素
<a><clipPath><filter><foreignObject><image><marker><mask><script><style><switch><text><view>

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# PatternElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pattern
height
href
patternContentUnits
patternTransform
patternUnits
systemLanguage
width
x
xlink:href
Deprecated
y

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Deprecated. Not for use in new websites.