HTML5 での SVG 2D ストロークと塗りつぶしの詳細な紹介

ソース ソースを示してください: 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）！