svg
svg 要素は、新しい座標系とビューポートを定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。
メモ: xmlns 属性は SVG ドキュメントの最も外側の svg 要素にのみ必要です。内部の svg 要素や HTML 文書の内部には不要です。
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
属性
baseProfile (en-US)非推奨 SVG 2-
文書が要求する最小の SVG 言語プロファイル 値の型: <string> ; 初期値: none; Animatable: no
contentScriptType (en-US)非推奨 SVG 2-
SVG フラグメントで用いられる初期記述言語 値の型: <string> ; 初期値:
application/ecmascript; アニメーション可否: no contentStyleType (en-US)非推奨 SVG 2-
SVG フラグメントで用いられる初期のスタイルシート言語 値の型: <string> ; 初期値:
text/css; アニメーション可否: no height (en-US)-
矩形ビューポートで表示される高さ (それ自身の座標系の高さではありません) 値の型: <length>|<percentage> ; 初期値:
auto; アニメーション可否: yes preserveAspectRatio (en-US)-
異なるアスペクト比での表示時に、
svgフラグメントがどう変形されるか 値の型: (none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)? ; 初期値:xMidYMid meet; アニメーション可否: yes version (en-US)非推奨 SVG 2-
要素内の内容にどのバージョンの SVG が用いられるか 値の型: <number> ; 初期値: none; アニメーション可否: no
viewBox-
The SVG viewport coordinates for the current SVG fragment. 値の型: <list-of-numbers> ; 初期値: none; アニメーション可否: yes
width (en-US)-
矩形ビューポートで表示される幅 (それ自身の座標系の幅ではありません) 値の型: <length>|<percentage> ; 初期値:
auto; アニメーション可否: yes x-
SVG コンテナが表示される x 座標。最も外側の
SVG要素では効果ありません。 値の型: <length>|<percentage> ; 初期値:0; アニメーション可否: yes y-
SVG コンテナが表示される y 座標。最も外側の
SVG要素では効果ありません。 値の型: <length>|<percentage> ; 初期値:0; Animatable: yes
メモ: SVG2 で開始する場合には、x, y, width, height は、ジオメトリプロパティです。これは、これらの属性が CSS プロパティとして用いられることを意味します。
グローバル属性
- コア属性
-
特に:
id,tabindex (en-US) - スタイル属性
class (en-US),style (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 (en-US),visibility (en-US) - Aria 属性
-
aria-activedescendant,aria-atomic,aria-autocomplete,aria-busy,aria-checked,aria-colcount,aria-colindex,aria-colspan,aria-controls,aria-current,aria-describedby,aria-details,aria-disabled,aria-dropeffect,aria-errormessage,aria-expanded,aria-flowto,aria-grabbed,aria-haspopup,aria-hidden,aria-invalid,aria-keyshortcuts,aria-label,aria-labelledby,aria-level,aria-live,aria-modal,aria-multiline,aria-multiselectable,aria-orientation,aria-owns,aria-placeholder,aria-posinset,aria-pressed,aria-readonly,aria-relevant,aria-required,aria-roledescription,aria-rowcount,aria-rowindex,aria-rowspan,aria-selected,aria-setsize,aria-sort,aria-valuemax,aria-valuemin,aria-valuenow,aria-valuetext,role
使用上の注意
| カテゴリー | コンテナー要素 、 構造的要素 |
|---|---|
| 許可されている内容 | 任意の数、任意の順序の以下の要素。 アニメーション要素 説明的要素 図形要素 構造的要素 グラデーション要素 <a> 、 <altGlyphDef> (en-US) 、 <clipPath> 、 <color-profile> 、 <cursor> (en-US) 、 <filter> (en-US) 、 <font> (en-US) 、 <font-face> (en-US) 、 <foreignObject> 、 <image> 、 <marker> (en-US) 、 <mask> 、 <pattern> 、 <script> 、 <style> (en-US) 、 <switch> 、 <text> 、 <view> (en-US) |
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 <svg> の定義 |
勧告候補 | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) <svg> の定義 |
勧告 | 初期の定義 |
ブラウザの実装状況
BCD tables only load in the browser