patternUnits

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.

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