ホームページ > 記事 > ウェブフロントエンド > HTML5 8 での SVG 2D の概要 - ドキュメント構造と関連要素の概要_html5 チュートリアル スキル
HTML5 8 での SVG 2D の概要 - ドキュメント構造と関連要素の概要_html5 チュートリアル スキル
- WBOYオリジナル
- 2016-05-16 15:50:131357ブラウズ
構造関連の組み合わせや再利用要素など、多くの基本要素はこれまでに紹介しましたが、ここでは SVG のドキュメント構造にある残りの関連要素を簡単にまとめてから、SVG の他の機能を理解することに進みます。
SVG ドキュメントの要素は、基本的に次のカテゴリに分類できます。
•アニメーション要素: animate、animateColor、animateMotion、animateTransform、set;
•説明要素: desc、metadata、title;
•グラフィック要素: 円、楕円、線、パス、多角形、ポリライン、四角形;
• 構造要素: defs、g、svg、シンボル、使用;
• グラデーション要素: linearGradient、radialGradient;その他の要素：a、altGlyphDef、clipPath、カラープロファイル、カーソル、フィルター、フォント、フォントフェイス、外部オブジェクト、イメージ、マーカー、マスク、パターン、スクリプト、スタイル、スイッチ、テキスト、ビューなど。
その中には、グラフィック要素、グラデーション要素、テキスト、画像要素、およびその組み合わせがすべて導入されており、ここでは構造に関連するその他の要素をいくつか紹介します。
View-svg 要素 ネストされた svg 要素を含め、svg 要素内に他の要素を任意の順序で配置できます。
svg 要素でサポートされる一般的に使用される属性は、id、class、x、y、width、height、viewBox、preserveAspectRatio、および fill とストロークの関連属性です。
svg 要素でサポートされているイベントは、onload、onmouseover、onmousemove、onmousedown、onmouseup、onclick、onfocusin、onfocusout、onresize、onscroll、onunload なども一般的に使用されます。 svg 要素については特に説明する必要はありません。属性とイベントの完全なリストについては、後ほど公式ドキュメントを参照してください。
説明要素 - desc 要素と title 要素 各コンテナ要素 (他のコンテナ要素またはグラフィック要素を含めることができる要素。a、defs、glyph、g、マーカー、マスク、欠落グリフ、パターン、svg、スイッチ、シンボルなど) およびグラフィック要素には、 desc 要素と title 要素を含めることができます。どちらも関連する状況を説明するために使用される補助要素であり、その内容は text です。 SVG ドキュメントがレンダリングされるとき、これら 2 つの要素はグラフィックにレンダリングされません。これら 2 つの要素の違いはそれほど大きくありません。実装によっては、タイトルがプロンプト情報として表示されるため、通常はタイトルが親要素の最初の位置に配置されます。
一般的な使用法は次のとおりです: