ソース ソースを示してください: SVG 2D ストロークと html5 の塗りつぶし
この属性は、設定された色を使用してグラフィックの内部を塗りつぶします。使用方法は非常に簡単です。この属性に色の値を直接割り当てるだけです。例を参照:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red" fill-opacity="0.5" stroke-opacity="0.8"/>
上の例では、赤と青のエッジを持つ長方形が描画されます。いくつかの点に注意してください:
1. fill 属性が指定されていない場合、デフォルトで黒の塗りつぶしが使用されます。塗りつぶしをキャンセルしたい場合は、それを none に設定する必要があります。
2. 塗りつぶしの不透明度を設定できます。値の範囲は 0 ~ 1 です。
枠線の色 - ストローク属性
上記の例では、ストローク属性を使用してグラフィックの境界線を描画します。使用方法も非常に簡単です。注:
1. ストローク属性が指定されていない場合、デフォルトではグラフィック境界線は描画されません。
2. エッジの透明度 (ストロークの不透明度) を設定できます。値の範囲は 0 ~ 1 です。
実際、エッジの状況はグラフ内よりも少し複雑です。これは、エッジには色に加えて定義する必要がある「形状」もあるためです。
線の終点 - ストローク-ラインキャッププロパティ
この属性は、線分の端点のスタイルを定義します。この属性では、butt、square、round の 3 つの値を使用できます。例を見てください:
りー
このコードは、異なるスタイルの線の端点を使用して 3 つの線を描画します。
左側の図から、3 つのスタイルの違いが簡単にわかります。
線の接続 - ストローク-ライン結合属性
この属性は、線分接続のスタイルを定義します。この属性では、マイター、ラウンド、ベベルの 3 つの値を使用できます。例を見てください:
りー
左の写真から、3つのスタイルの違いが簡単にわかります。
仮想線と現実線 - ストローク-ダシャーレイ属性
この属性は、線分がどの種類の破線または実線を使用するかを設定できます。例を参照してください:
<svg width="160" height="140">
<line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
<line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
这个属性是设置一些列数字,不过这些数字必须是逗号隔开的。属性中当然可以包含空格,但是空格不作为分隔符。每个数字定义了实线段的长度,分别是按照绘制、不绘制这个顺序循环下去。所以左面的例子中绘制的线是画5单位的实线,留5单位的空格,再画5单位的实线...这样一直下去。除了这些常用的属性,还有下列属性可以设置:
stroke-miterlimit:这个和canvas中的一样,它处理什么时候画和不画线连接处的miter效果。
stroke-dashoffset:这个属性设置开始画虚线的位置。
使用CSS展示数据
HTML5强化了p+CSS的思想,所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比,只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子:
#MyRect:hover { stroke: black; fill: blue; }
是不是很熟悉,就是这么简单的。
以上就是HTML5中SVG 2D笔画与填充的详细介绍的内容,更多相关内容请关注PHP中文网(www.php.cn)!