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

黄舟
リリース: 2017-03-03 16:56:50
オリジナル
2035 人が閲覧しました

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


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート