HTML5 SVG 四角形の簡単な例 Sharing_html/css_WEB-ITnose

最近 HTML5 を学習し始め、SVG について少しずつ学習してきました。今日は「svg 長方形」の部分を共有したいと思います。

1. 単純な四角形

レンダリングは次のようになります:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect width="300" height="100"></rect>            </svg>

コード分析:

rect は四角形を表します。要素は高さを定義できます

2. 長方形の塗りつぶしの色と境界線

レンダリングは次のとおりです:

キーコード:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect width="300" height="100" <span style="font-family: Arial, Helvetica, sans-serif;">style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);"</span><span style="font-family: Arial, Helvetica, sans-serif;">></rect>    </span>        </svg>

コード分析:

CSSのfill属性で定義されるのは、四角形の塗りつぶしの色 (RGB 値、色名、または 16 進値)

CSS のストローク幅プロパティは四角形の境界線の幅を定義します

CSS のストロークプロパティは四角形の境界線の色を定義します

3. 長方形の透明度

レンダリングは次のとおりです:

キーコード:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;"></rect>            </svg>

コード分析:

CSS の fill-opacity 属性は塗りつぶしの色を定義します透明度 (有効な範囲は 0 ～ 1);

CSS のストロークの不透明度属性は境界線の色の透明度を定義します (有効な範囲は 0 ～ 1);

CSS の不透明度属性は境界線の不透明度を定義します要素全体 (有効な範囲は 0 ～ 1);

キー コード:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20"></rect>            </svg>

コード分析:

x 属性は四角形の左の位置を定義します (たとえば、x="0" は四角形からの距離を定義します)

y 属性は、長方形の上部の位置を定義します (たとえば、 , y="0" は、長方形から上部までの距離を 0px として定義します)

5.

レンダリングは次のとおりです:

キーコード:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">        <rect width="300" height="100" style="fill:deepskyblue;stroke-width:2;stroke:rgb(0,0,0);fill-opacity:0.5;stroke-opacity:0.9;opacity:0.5;" x="0" y="20" rx="20" ry="20"></rect>            </svg>

コード分析:
rx ry 属性は、四角形の角を丸めることができます (css3 の角丸属性と同様)

さて、今日の共有はここで終わります。私も勉強しながら共有していますので、もし間違いがあれば修正して次回共有してください。」の部分は、それまでに閲覧しに来ていただければ幸いです。