HTML5 SVG 2D 入門 4—Stroke と Fill_html5 のチュートリアル スキル

先ほどはさまざまな図形、テキスト、画像をまとめました。次に、キャンバスについて説明したのと同じように、色の処理、つまり塗りつぶしと境界線の効果をまとめます。キャンバスのように一貫しています。これらの属性は要素内に属性として記述することも、CSS に保存することもできます (キャンバスとは異なります)。
塗りつぶしの色 - 塗りつぶし属性
この属性は、設定された色を使用してグラフィックの内部を塗りつぶします。使用方法は非常に簡単です。この属性を直接使用します。例を見てください:

コードをコピーします

コードは次のとおりです:

fill-opacity="0.5" ストローク不透明度="0.8" />

上の例では、赤と青のエッジを持つ長方形が描画されます。いくつかの点に注意してください:
1. fill 属性が指定されていない場合、デフォルトで黒の塗りつぶしが使用されます。塗りつぶしをキャンセルしたい場合は、これを none に設定する必要があります。
2. fill-opacity で塗りつぶしの透明度を設定できます。値の範囲は 0 ～ 1 です。
3. fill-rule 属性はもう少し複雑です。この属性は、点が充填範囲に属するかどうかを判断するためのアルゴリズムを定義します。値の継承に加えて、次の 2 つの値があります。 nonzero: この値に使用されるアルゴリズムは次のとおりです。決定する点から任意の方向に線を開始し、グラフと線分の交点の方向を計算します。結果は 0 から始まり、すべての交点の線分が左から右の場合は、線分が右から左の交点ごとに 1 を加算します。この計算の結果が 0 に等しくない場合は、点がグラフィック内にある場合は塗りつぶす必要があり、値が 0 に等しい場合は、グラフィックの外側にあるため塗りつぶす必要はありません。以下の例を見てください:

evenodd: この値に使用されるアルゴリズムは、決定する点から任意の方向に直線を開始し、グラフと線分の交点の数を計算します。が奇数の場合は、グラフ内の点を変更する必要があります。数値が偶数の場合、点はグラフィックの外側にあるため、塗りつぶす必要はありません。以下の例を見てください:

境界線の色 - ストローク属性
この属性は、設定された値を使用してグラフィックの境界線を描画します。使い方も非常に簡単で、色の値を割り当てるだけです。注: 1.
ストローク 属性が指定されていない場合、デフォルトではグラフィック境界線は描画されません。 2. エッジの透明度を設定できます。値の範囲は 0 ～ 1 です。
実際には、エッジの状況はグラフ内よりも少し複雑です。これは、エッジには色に加えて定義する必要がある「形状」もあるためです。
線の端点 - ストロークラインキャップ属性

この属性は、線分の端点のスタイルを定義します。この属性では を使用できます。 butt、square、round
3 つの値。例を見てください:

コードをコピーします

コードは次のとおりです:

このコードは、異なるスタイルの線の終点を使用して 3 つの線を描画します。

左の写真から、3 つのスタイルの違いが簡単にわかります。

線接続 - ストローク-ライン結合属性

この属性は、3 つの miter、round、bevel
値を使用できます。 。例を見てください:

コードをコピーします

コードは次のとおりです:

<ポリラインポイント="40 60 80 20 120 60" ストローク="黒" ストローク幅="20"
ストローク-linecap="butt" fill="transparent" ストローク-linejoin="マイター"/>

<ポリライン ポイント="40 140 80 100 120 140" ストローク="黒" ストローク- width="20"
ストローク-linecap="round" fill="transparent" ストローク-linejoin="round"/>

<ポリライン ポイント="40 220 80 180 120 220" ストローク="黒" ストローク-幅="20"
ストローク-ラインキャップ="スクエア" フィル="透明" ストローク-ライン結合="ベベル"/>

左の写真から、3 つのスタイルの違いが簡単にわかります。

仮想線と実線 - ストローク-dasharray 属性
この属性は、線分に使用する仮想線と実線を設定できます。例を見てください:

コードをコピーします

コードは次のとおりです:

ストローク-ラインキャップ="ラウンド" ストローク-dasharray=" 5,10,5" fill="none"/>
ストローク-ラインキャップ="ラウンド" ストローク幅=" 1" ストローク-dasharray="5,5" fill="none"/>

この属性は一連の数値を設定しますが、これらの数値はカンマで区切る必要があります。

属性にはもちろんスペースを含めることができますが、スペースは区切り文字として機能しません。各数字

は実線セグメントの長さを定義し、描画、非描画の順に循環します。

左側の例で描かれた線は、5 単位のスペースを残した 5 単位の実線です。

さらに 5 単位の実線を描きます...このように続けます。

これらの一般的に使用される属性に加えて、次の属性も設定できます:
ストローク-miterlimit: これは、キャンバスでのマイター効果を処理します。線を描くときと描かないときの接続。
ストローク-ダッシュオフセット: この属性は、破線の描画を開始する位置を設定します。

CSSを使ってデータを表示する
HTML5ではDIV CSSの考え方が強化されているため、データ表示部分もCSSに任せることができます。通常の HTML 要素と比較すると、background-color と border が fill とストロークに置き換えられただけです。他のほとんどのものはほぼ同じです。簡単な例を見てみましょう:

コードをコピーします

コードは次のとおりです:

#MyRect:hover {
ストローク: black;
fill: blue;
}

とてもシンプルですね。

実用的なリファレンス:
スクリプト インデックス: 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/