<pattern>
<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 (en-US)
-
この属性はパターンタイルの高さを指定します。 値の型: <length>|<percentage>; 既定値:
0
; アニメーション: 可 href
-
この属性は
<pattern>
属性の既定値を提供するテンプレートパターンを参照します。 値の型: <URL>; 既定値: none; アニメーション: 可 patternContentUnits (en-US)
-
この属性は
<pattern>
の内容物の座標系を定義します。 値の型:userSpaceOnUse
|objectBoundingBox
; 既定値:userSpaceOnUse
; アニメーション: 可メモ: この属性は、
viewBox
属性が<pattern>
上に指定された場合は効果がありません。 patternTransform (en-US)
-
この属性は、パターン座標系からターゲット座標系への任意の追加変換の定義が入ります。 値の型: <transform-list>; 既定値: none; アニメーション: 可
patternUnits (en-US)
-
この属性は
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)
利用メモ
仕様書
Specification |
---|
Scalable Vector Graphics (SVG) 2 # Patterns |
ブラウザーの互換性
BCD tables only load in the browser