<pattern>
=========

**`<pattern>`** 要素は、ある領域をカバーするために、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 (en-US)`

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

`href (en-US)`

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

`patternContentUnits (en-US)`

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

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

`patternTransform (en-US)`

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

`patternUnits`

 この属性は `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*; *アニメーション*: **可**

**メモ:** `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`, `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`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

XLink 属性

最重要なもの: `xlink:title (en-US)`

利用メモ
----

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素`<a>`、`<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) 2 # Patterns |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.