<pattern>

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

<pattern> は、他のグラフィック要素の 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 (en-US): この属性はパターンタイルの高さを指定します。 値の型: <length>|<percentage>; 既定値: 0; アニメーション: 可
href: この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可
patternContentUnits (en-US): この属性は <pattern> の内容物の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox; 既定値: userSpaceOnUse; アニメーション: 可

Note: この属性は、viewBox 属性が <pattern> 上に指定された場合は効果がありません。
patternTransform (en-US): この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 値の型: <transform-list>; 既定値: none; アニメーション: 可
patternUnits (en-US): この属性は x, y, width, height の各属性の座標系を定義します。 値の型: userSpaceOnUse|objectBoundingBox; 既定値: objectBoundingBox; アニメーション: 可
preserveAspectRatio (en-US): この属性は、SVG フラグメントが異なるアスペクト比を持つコンテナーに埋め込まれた場合に、どのように変形させなければならないかを定義します。 値の型: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; 既定値: xMidYMid meet; アニメーション: 可
viewBox: この属性は、パターンフラグメントの SVG ビューポートの境界を定義します。 値の型: <list-of-numbers> ; 既定値: none; アニメーション: 可
width (en-US): この属性はパターンタイルの幅を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション: 可
x: この属性はパターンタイルの x 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション: 可
xlink:href (en-US): この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可

Note: href を実装しているブラウザーでは、 href と xlink:href を共に設定した場合、xlink:href は無視され href のみが使用されます。
y: この属性はパターンタイルの y 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値: 0; アニメーション: 可

グローバル属性

コア属性: 最重要なもの: id, tabindex (en-US)
スタイル付け属性: class (en-US), style (en-US)
条件処理属性: 最重要なもの: requiredExtensions, systemLanguage (en-US)
プレゼンテーション属性: 最重要なもの: clip-path (en-US), clip-rule (en-US), color, color-interpolation (en-US), color-rendering (en-US), cursor (en-US), display (en-US), fill, fill-opacity, fill-rule (en-US), filter (en-US), mask (en-US), opacity (en-US), pointer-events (en-US), shape-rendering (en-US), stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit (en-US), stroke-opacity (en-US), stroke-width (en-US), transform, vector-effect (en-US), visibility (en-US)
XLink 属性: 最重要なもの: xlink:title (en-US)

許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a> 、 <altGlyphDef> (en-US) 、 <clipPath> 、 <color-profile> 、 <cursor> (en-US) 、 <filter> (en-US) 、 <font> (en-US) 、 <font-face> (en-US) 、 <foreignObject> 、 <image> 、 <marker> (en-US) 、 <mask> 、 <pattern> 、 <script> 、 <style> (en-US) 、 <switch> 、 <text> 、 <view> (en-US)

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

仕様書

Specification
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG) # Patterns

ブラウザーの互換性

BCD tables only load in the browser

<pattern>

例

属性

グローバル属性

利用メモ

仕様書

ブラウザーの互換性