patternUnits

patternUnits 属性は、 <pattern> 要素のジオメトリープロパティにどの座標系を使用するかを示します。

この属性は以下の SVG 要素で使用することができます。

html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- すべてのジオメトリープロパティは、現在のユーザー空間からの相対値です。 -->
  <pattern
    id="p1"
    x="12.5"
    y="12.5"
    width="25"
    height="25"
    patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- すべてのジオメトリープロパティは、対象とするバウンディングボックスからの相対値です。 -->
  <pattern
    id="p2"
    x=".125"
    y=".125"
    width=".25"
    height=".25"
    patternUnits="objectBoundingBox">
    <circle cx="10" cy="10" r="10" />
  </pattern>

  <!-- Left square with user space tiles -->
  <rect x="10" y="10" width="80" height="80" fill="url(#p1)" />

  <!-- Right square with bounding box tiles -->
  <rect x="110" y="10" width="80" height="80" fill="url(#p2)" />
</svg>

pattern

<pattern> の場合、 patternUnits は要素のジオメトリープロパティ(x, y, width, height)に使用する座標系を定義します。

userSpaceOnUse | objectBoundingBox
既定値 objectBoundingBox
アニメーション
userSpaceOnUse

この値は、ジオメトリープロパティのすべての座標が、パターンが適用されたときに定義されたユーザー座標系を参照することを示します。

objectBoundingBox

この値は、ジオメトリープロパティのすべての座標が、パターンが適用される要素のバウンディングボックスの分数またはパーセント値を表します。バウンディングボックスは <pattern> のコンテンツが "0 0 1 1" viewBox にバインドされているのと同じと考えることができます。

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# PatternElementPatternUnitsAttribute

ブラウザーの互換性

BCD tables only load in the browser