<pattern>
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.
<pattern>
要素は、ある領域をカバーするために、x座標とy座標の間隔を繰り返して (「タイル」) 再描画することができるグラフィックオブジェクトを定義します。
<pattern>
は、他のグラフィック要素の fill
や stroke
属性から参照され、参照されたパターンでそれらの要素を埋めたり、描いたりします。
例
<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>|<percentage>; 既定値:
0
; アニメーション: 可 href
-
この属性は
<pattern>
属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可 patternContentUnits
-
この属性は
<pattern>
の内容物の座標系を定義します。 値の型:userSpaceOnUse
|objectBoundingBox
; 既定値:userSpaceOnUse
; アニメーション: 可メモ: この属性は、
viewBox
属性が<pattern>
上に指定された場合は効果がありません。 patternTransform
-
この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 値の型: <transform-list>; 既定値: none; アニメーション: 可
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>|<percentage> ; 既定値:
0
; アニメーション: 可 x
-
この属性はパターンタイルの x 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値:
0
; アニメーション: 可 xlink:href
非推奨-
この属性は
<pattern>
属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可メモ:
href
を実装しているブラウザーでは、href
とxlink:href
を共に設定した場合、xlink:href
は無視されhref
のみが使用されます。 y
-
この属性はパターンタイルの y 方向のシフト量を指定します。 値の型: <length>|<percentage> ; 既定値:
0
; アニメーション: 可
グローバル属性
- コア属性
- スタイル付け属性
class
,style
- 条件処理属性
-
最重要なもの:
requiredExtensions
,systemLanguage
- プレゼンテーション属性
-
最重要なもの:
clip-path
,clip-rule
,color
,color-interpolation
,color-rendering
,cursor
,display
,fill
,fill-opacity
,fill-rule
,filter
,mask
,opacity
,pointer-events
,shape-rendering
,stroke
,stroke-dasharray
,stroke-dashoffset
,stroke-linecap
,stroke-linejoin
,stroke-miterlimit
,stroke-opacity
,stroke-width
,transform
,vector-effect
,visibility
- XLink 属性
-
最重要なもの:
xlink:title
利用メモ
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Patterns |
ブラウザーの互換性
BCD tables only load in the browser