Simple examples of HTML5 SVG rectangular painting: html5svg rectangular drawing

Simple examples of HTML5 SVG rectangular painting: html5svg rectangular drawing

Recently I am a beginner in HTML5. I just learned SVG step by step and accumulated some personal experiences and code. I hope to share with you the "svg rectangle" section today.

1. Simple rectangle

As follows:

Key code:

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

Code parsing:

Rect indicates a rectangle;

The width and height attributes of the rect element can define the height and width of the rectangle;

 

2. Rectangle filling color and border

As follows:

 

Key code:

<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>

Code parsing:

The fill attribute of CSS defines the fill color of the rectangle (rgb value, color name, or hexadecimal value );

The stroke-width attribute of CSS defines the width of the rectangle border;

The stroke attribute of CSS defines the color of the rectangle border.

 

3. rectangular transparency

As follows:

Key code:

<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>

Code parsing:

The fill-opacity attribute of CSS defines the fill color transparency (valid range: 0-1 );

The stroke-opacity attribute of CSS defines the transparency of the border color (valid range: 0-1 );

The opacity attribute of CSS defines the opacity of the entire element (valid range: 0-1 );

 

4. rectangular position

As follows:

Key code:

<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>

Code parsing:

The x property defines the left position of the rectangle (for example, x = "0" defines the distance from the rectangle to the left is 0 px );

The y attribute defines the top position of the rectangle (for example, y = "0" defines the distance from the rectangle to the top is 0 px)

5. rounded rectangle

As follows:

Key code:

<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>

 

Code parsing:

The rx and ry attributes generate rounded corners for the rectangle (similar to the css3 rounded corner attribute)

Now, today's sharing is over. I also share it while learning. If something is wrong, please correct it. Next time I will share the "svg circle" section. I hope you will visit it later, thank you.