HTML5 SVG 2Dはじめに8-ドキュメント構造と関連要素の概要

著者：Eve Cole 更新時間：2025-04-10 04:16:01

構造関連の組み合わせや再利用要素など、多くの基本的な要素を導入しました。ここでは、SVGドキュメント構造の残りの関連要素を簡単に要約し、SVGの他の機能を理解し続けます。

SVGドキュメントの要素は、基本的に次のカテゴリに分けることができます。

•アニメーション要素：Animate、AnimateColor、AnimateMotion、AnimateTransForm、set;

•説明要素：DESC、メタデータ、タイトル。

•グラフィック要素：サークル、楕円、ライン、パス、ポリゴン、ポリライン、長方。

•構造要素：defs、g、svg、シンボル、使用。

•勾配要素：線形勾配、放射状勾配。

•その他の要素：a、altglyphdef、clippath、colorprofile、cursor、filter、font、font-face、foreignobject、image、marker、mask、パターン、スクリプト、スタイル、スイッチ、テキスト、ビューなど。

その中で、グラフィック要素、勾配要素、テキスト、画像要素、組み合わせが導入されています。以下は、構造に関連する他のいくつかの要素です。

ウィンドウ-SVG要素

他の要素は、ネストされたSVG要素を含むSVG要素の任意の順序で配置できます。

SVG要素によってサポートされるプロパティ、つまりID、class、x、y、幅、高さ、ビューボックス、Preserveaspectratio、およびfill and Stroke関連属性など、一般的に使用されます。

SVG要素によってサポートされているイベントは、オンロード、オンロード、オンマウスオーバー、onmousemove、onMousedown、onmouseup、onclick、onfocusin、onfocusout、on Resize、onscroll、onunloadなども一般的に使用されます。SVG要素については話しません。完全な属性とイベントリストについては、以下の公式ドキュメントを参照してください。

説明要素 - DESC要素とタイトル要素

各コンテナ要素（A、DEFS、G、G、Marker、Mask、Missing-Glyph、Pattern、SVG、Switch、Sinderなど、他のコンテナ要素またはグラフィック要素の要素を含めることができます）およびグラフィック要素には、DESCおよびタイトル要素を含めることができます。これらの2つの要素は補助要素であり、関連する状況を説明するために使用されます。彼らのコンテンツはテキストです。 SVGドキュメントがレンダリングされると、これらの2つの要素はグラフィックにレンダリングされません。 2つの要素の違いは大きすぎません。タイトルはいくつかの実装で迅速なメッセージとして表示されるため、タイトルは通常、親要素の最初の位置に配置されます。

典型的な使用法は次のとおりです。

<g>

<title> companysalesbyRegion </title>

<desc>

表示するthisabarchart

CompanySalesbyRegion。

</desc>

<！ - barChartDefinedAsVectordata->

</g>

</svg>

一般に、最も外側のSVG要素には、プログラムがより適切に読みやすくなるように、タイトルの説明を添付する必要があります。

マーカー要素

タグは、1つ以上の頂点（パス、ライン、ポリライン、またはポリゴンの頂点）に接続されたグラフィカル要素（矢印とマルチポイントマーカー）を定義します。矢印は、パス、ライン、またはポリラインの開始点またはエンドポイントに取り付けることができます。マルチポイントタグは、パス、ライン、ポリライン、またはポリゴンのすべての頂点にタグを追加できます。

マーカーはマーカー要素によって定義され、パス、ライン、ポリライン、またはポリゴンに関連属性（マーカー、マーカースタート、マーカーミッド、およびマーカーエンド）を設定します。例を参照してください：

<svgwidth = "4in" height = "2in"

viewbox = "0040002000"バージョン= "1.1"

xmlns = "http://www.w3.org/2000/svg">

<defs>

<markerid = "triangle"

viewbox = "001010" refx = "0" refy = "5"

MarkerUnits = "strokeWidth"

markerwidth = "4" markerheight = "3"

Orient = "auto">

</marker>

</defs>

<desc> placinganarrowheadtheendofapath。

</desc>

<pathd = "M1000750L2000750L25001250"

fill = "none" stroke = "black" stroke-width = "100"

Marker-end = "url（#triangle）"/>

</svg>

マーカーの関連する知識を詳細に見てみましょう。

1.マーカーはコンテナ要素であり、グラフィック要素、コンテナ要素、アニメーション、グラデーション要素などを任意の順序で保存できます。

2。マーカー要素は、新しいウィンドウを作成できます。ViewBoxの値を設定します。

3.マーカーのより重要な属性：

MarkerUnits = strokeWidth | usersSpaceOnuse

このプロパティは、MarkerWidth、MarkerHeight、およびMarkerの内容によって使用される座標系を定義します。このプロパティには、選択できる2つの値があります。最初の値ストロークウィッドはデフォルト値です。属性の内容によって使用される座標系MarkerWidth、MarkerHeight、およびMarkerは、マーカーのグラフィック要素のストローク幅によって設定された値に等しくなります。

たとえば、上記の例では、マーカー要素の幅は400、高さは300です。ただし、混乱しないでください。マーク要素のパスで使用される座標は、ViewBoxによって設定された新しいユーザー座標システムです。

この属性のもう1つの値は、ユーザーSpaceOnuseです。これは、マーカーのグラフィック要素を指す座標系を使用して、属性MarkerWidth、MarkerHeight、およびMarkerの内容を表します。

refx、refy：マーカーに沿った参照ポイントの位置座標を定義します。たとえば、上記の例では、参照されるポイントはエンドポイントであり、マーカーの（0,5）位置に整列する必要があります。 RefxとRefyは、ViewBoxによって変換されたエンドユーザー座標システムを使用することに注意してください。

MarkerWidth、MarkerHeight：マーカーウィンドウの幅と高さ、これは理解しやすいです。

方向：マーカー回転の角度を定義します。角度を指定するか、自動を直接割り当てることができます。

AutoはX軸の正の方向を表し、次のルールに従って回転します。

a。マーカーが配置されているポイントが1つのパスのみに属している場合、マーカーのX軸の前方方向はパスと同じです。上記の例を参照してください。

b。マーカーが配置されているポイントが2つの異なるパスに属している場合、マーカーのx軸の前方方向は、2つのパス間の角度の角度等化線と一致します。

4。グラフィカル要素のマーカー属性

マーカーを参照するには、関連する属性を使用する必要があります。主にこれらの3つ：マーカースタート（参照マーカーを出発点に置く）、マーカーミッド（参照されたマーカーを開始点とエンドポイントを除くすべてのポイントに置きます）、マーカーエンド（参照マーカーをエンドポイントに置きます）。これらの3つの属性の値は、マーカーの参照（特定のマーカーを参照）、継承（言うまでもなく）（言うまでもなく）（マーカーが引用されていないことを表しています）である場合があります。

また、上記の例からマーカーの使用を確認することもできます。

スクリプトとスタイル - スクリプト要素とスタイル要素

実際、基本的には、すべての属性（テキストだけでなくすべての要素に対して）は、CSSの要素に関連付けられ、すべてのCSS属性がSVG画像で利用可能です。スタイル属性を使用して、要素のスタイルを設計するか、スタイルシートデザイン要素のスタイルを参照できます。 XMLファイルのスタイルシートを解析しないでください（問題を引き起こす文字が含まれることがあるため）。したがって、XMLCDATAセクションに配置する必要があります。同じことがスクリプトにも当てはまり、XMLCDATAセクションに配置する必要があります。次のCSSの例を参照してください。

<！[cdata [

.Abbreviation {Text-Decoration：underline;}

]]>

</style>

</defs>

<g>

<textx = "20" y = "50" font-size = "30"> colorscanbespecified </text>

<textx = "20" y = "150" font-size = "30"> orbykeywordssuchas </text>

<tspanstyle = "fill：lightsteelblue; font-size：30"> lightsteelblue </tspan>、

</text>

</g>

</svg>

スクリプトの例を見てみましょう：

<desc> scriptingtheonclickeven </desc>

<defs>

<！[cdata [

functionhidereveal（evt）{

variabletarget = evt.target;

varthefill = imageTarget.getAttribute（ "fill"）;

if（thefill == 'white'）

imageTarget.setTribute（ "fill"、 "url（#notes）"）;

それ以外

ImageTarget.SetAttribute（ "Fill"、 "White"）;

}

]]>

</script>

<patternid = "notes" x = "0" y = "0" width = "50" height = "75"

patternTransform = "Rotate（15）"

patternunits = "userspaceonuse">

<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"

ストロークウィッド= "3"ストローク= "ブラック"/>

<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"

ストロークウィッド= "3"ストローク= "ブラック"/>

</pattern>

</defs>

<EllipseOnclick = "Hidereveal（evt）" cx = "175" cy = "100" rx = "125" ry = "60"

fill = "url（#notes）" stroke = "black" stroke-width = "5"/>

</svg>

条件付き処理 - スイッチ要素

条件付き処理属性は、要素がレンダリングされるかどうかを制御できる属性です。基本的に、ほとんどの要素（特にグラフィック要素）は、条件付き処理特性を指定できます。 3つの条件付き処理プロパティがあります。必要なフィーチャー、必須削除、およびシステム言語です。これらのプロパティは一連のテストであり、値のリストを指定できます（最初の2つのプロパティはスペースによって分離され、言語プロパティはコンマで分離されます）、デフォルト値は真です。

SVGのスイッチ要素は、指定された条件に従ってレンダリングする機能を提供します。スイッチ要素は、グラフィック要素、説明要素、アニメーション要素、a、a、foreignobject、g、image、svg、switch、テキスト、使用およびその他の要素を含むコンテナ要素です。スイッチ要素は、直接子要素の条件付き処理属性を順番にチェックし、次に独自の条件を満たす最初の子要素をレンダリングします。他の子要素は無視されます。これらのプロパティは、ディスプレイプロパティと同様に、これらのプロパティを直接使用する要素のレンダリングにのみ影響し、参照される要素（使用によって参照される要素など）には影響しません。簡単に言えば、これらの3つの属性は、A、AltGlyph、ForeignObject、TextPath、TREF、TSPAN、Animate、AnimateColor、Animatemotion、AnimateTransform、セットなどの要素に影響を与え、DEFS、CURSOR、MASK、CLIPPATH、パターンなどの要素には影響しません（これらの要素はレンダム性、または他の要素を参照しません）。

注：子要素の表示と可視性属性値は、スイッチ要素条件判断の結果に影響しません。

条件付き処理属性の値のリストについては、公式ドキュメントを参照してください。ここに小さな例があります：

<rectRequiredfeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" width = "322" height = "502" Opacity = "0.6"

fill = "black" stroke = "none" filter = "url（#gblshadow）"/>

<rectx = "10" y = "10" width = "322" height = "502" Opacity = "0.6"

fill = "black" stroke = "none"/>

</switch>

この例の意味は簡単です。ブラウザが使用するブラウザはフィルター機能をサポートし、上記の長方形（フィルター属性を使用）を描画します。フィルター機能がサポートされていない場合は、以下の長方形を描画します。

実際、より多くの場合、最も一般的に使用される属性はSystemLanguageであり、これはテキストの多言語処理能力です。例えば：

</switch>

</svg>

実用的なリファレンス：

スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開発センター：https：//developer.mozilla.org/en/svg

人気リファレンス：http：//www.chinasvg.com/

公式文書：http：//www.w3.org/tr/svg11/