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.
例
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