<pattern>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

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

例

html,
body,
svg {
  height: 100%;
}

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>; 既定値: 0; アニメーション: 可
href: この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可
patternContentUnits: この属性は <pattern> の内容物の座標系を定義します。 値の型: userSpaceOnUse | objectBoundingBox; 既定値: userSpaceOnUse; アニメーション: 可

メモ: この属性は、viewBox 属性が <pattern> 上に指定された場合は効果がありません。
patternTransform: この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 値の型: <transform-list>; 既定値: 等値行列; アニメーション: 可
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>; 既定値: 0; アニメーション: 可
x: この属性はパターンタイルの x 方向のシフト量を指定します。 値の型: <length>; 既定値: 0; アニメーション: 可
xlink:href 非推奨;: この属性は <pattern> 属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可

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

利用メモ

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

仕様書

Specification
Scalable Vector Graphics (SVG) 2 # PatternElement

ブラウザーの互換性

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月22日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content