以前は、さまざまな形、テキスト、写真の要約に焦点を当てていました。次に、キャンバスについて説明するように、色の処理、つまり充填と境界の効果を要約します。ここのコンテンツは基本的にキャンバスと同じであることがわかります。これらのプロパティは、要素で属性として記述するか、CSSに保存されます（これはキャンバスとは異なります）。
塗りつぶしの属性このプロパティは、セット色を使用してフィギュアの内側を埋めます。非常に簡単に使用できます。このプロパティに色の値を直接割り当てるだけです。例を参照してください：<rect x = "10" y = "10" stroke = "blue" fill = "red"
fill-opacity = "0.5" stroke-opacity = "0.8"/>
上記の例では、赤と青の長方形が描かれています。注意すべきいくつかのポイント：
1.充填属性が提供されていない場合、デフォルトでブラックフィルが使用されます。塗りつぶしをキャンセルしたい場合は、塗りつぶしに設定する必要があります。
2。塗りつぶしの透明度、つまり充填物の範囲を設定することができ、値範囲は0〜1です。
3.わずかに複雑なものは、フィルルール属性です。このプロパティは、ポイントが充填範囲に属するかどうかを決定するアルゴリズムを定義します。継承に加えて、2つの値があります。
非ゼロ：この値に使用されるアルゴリズムは、任意の方向に判断する必要があるポイントから行を放出し、図と線セグメントの間の交差点の方向を計算することです。計算結果は0から始まり、交差点のすべての線セグメントは左から右に、1を追加します。交差点のすべての線セグメントは右から左に、1を減算します。この方法ですべての交差点を計算した後、この計算の結果が0に等しくない場合、ポイントは図にあり、満たす必要があります。値が0に等しい場合、図の外側で入力する必要はありません。次の例を参照してください。Evendd ：この値に使用されるアルゴリズムは、任意の方向に判断する必要があるポイントから行を放出し、図と線セグメントが交差する点の数を計算することです。数字が奇妙な場合、ポイントが図に変更され、充填する必要があります。数字が偶数の場合、ポイントは図の外側であり、埋める必要はありません。下の図の例を参照してください：境界線色 - ストローク属性上記の例では、ストローク属性を使用しています。この属性は、設定値を使用して図の境界線を描画します。これは、使用するのにも非常に直接的です。色の値を割り当てるだけです。知らせ：1.ストローク属性が提供されていない場合、グラフの境界はデフォルトで描画されません。
2。エッジの透明度を設定できます。これは脳卒中障害であり、値範囲は0〜1です。
実際、エッジの状況はグラフの内側よりもわずかに複雑です。色に加えて、エッジには定義する必要がある形状もあるためです。
ラインのエンドポイント-Stroke -LineCapプロパティ
このプロパティは、ラインセグメントのエンドポイントのスタイルを定義します。このプロパティは、3つの値、正方形、および円形を使用できます。例を参照してください：<svg>
<行x1 = "40" x2 = "120" y1 = "20" y2 = "20" stroke = "ブラック"ストローク幅= "20"ストロークリネカップ= "butt"/>
<行x1 = "40" x2 = "120" y1 = "60" y2 = "60" stroke = "ブラック"ストローク幅= "20"ストロークリネカップ= "正方形"/>
<行x1 = "40" x2 = "120" y1 = "100" y2 = "100" stroke = "ブラック"ストローク幅= "20"ストロークリンカップ= "round"/>
</svg>
このコードは、さまざまなスタイルのラインエンドポイントを使用して3行を描画します。
左側の写真から、3のスタイルの違いを簡単に確認できます。
ライン接続 - ストロークラインジョイン属性このプロパティは、ラインセグメントの接続でスタイルを定義します。このプロパティは、Miter、Round、およびBevelの3つの値を使用できます。例を参照してください：<svg>
<Polyline Points = "40 60 80 20 120 60"ストローク= "ブラック"ストローク幅= "20"
stroke-linecap = "butt" fill = "透明な" stroke-linejoin = "miter"/>
<Polyline Points = "40 140 80 100 120 140"ストローク= "ブラック"ストローク幅= "20"
stroke-linecap = "round" fill = "透明な" stroke-linejoin = "round"/>
<Polyline Points = "40 220 80 180 120 220"ストローク= "ブラック"ストローク幅= "20"
stroke-linecap = "square" fill = "透明な" stroke-linejoin = "bevel"/>
</svg>
左側の写真から、3のスタイルの違いを簡単に確認できます。
仮想および実際のライン - ストロークダッシュアレイ属性
このプロパティは、ラインセグメントの仮想ラインと実際のラインを設定できます。例を参照してください：<svg>
<PATH D = "M 10 75 Q 50 10 100 75 T 190 75"ストローク= "ブラック"
stroke-linecap = "round" stroke-dasharray = "5,10,5" fill = "none"/>
<Path D = "M 10 75 L 190 75"ストローク= "Red"
stroke-linecap = "round" stroke-width = "1" stroke-dasharray = "5,5" fill = "none"/>
</svg>
このプロパティはいくつかの数字の列を設定しますが、これらの数値はコンマを分離する必要があります。
もちろん、スペースは属性に含めることができますが、スペースは区切り文字としては使用されません。各番号
実線セグメントの長さは定義されており、描画ではなく描画の順に循環します。
したがって、左側の例に描かれた線は、5ユニットの固体ラインで、5ユニットのスペースが残ります。
5ユニットの固体ラインを描きます...そしてこのように続けます。
これらの一般的に使用されるプロパティに加えて、次のプロパティを設定できます。
Stroke-MiterLimit ：これは、Canvasと同じです。これは、ラインが描画される場合と描かれている場合の接続でマイター効果を処理します。ストロークダッシュオフセット：このプロパティは、点線が描画され始めた位置を設定します。 CSSを使用してデータを表示しますHTML5はDiv+CSSの概念を強化するため、データを表示する部分は、処理のためにCSSに引き渡すこともできます。通常のHTML要素と比較して、それはただの背景色と境界線であり、塗りつぶしとストロークに置き換えられます。他のほとんどは似ています。簡単な例を見てみましょう：#myrect：hover {
ストローク：黒;
塗りつぶし：青;
}
とても馴染みがありませんか？そんなに簡単です。
実用的なリファレンス：スクリプトインデックス：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/