HTML5 SVG Rectangle Simple Example sharing

Recently I beginner HTML5, just in step by step learning SVG, accumulated some personal experience and program code, hope to share with you, today share "SVG rectangle" part

1. Simple Rectangle

As follows:

Key code:

<xmlns= "Http://www.w3.org/2000/svg"  version= "1.1">         <width= "  height"= "+"> </rect>            </svg>

Code parsing:

Rect represents a rectangle;

The width and Height properties of a RECT element define the height and width of the rectangle;

2. Rectangle Fill Color and border

As follows:

Key code:

<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1">        <rectwidth= "+"Height= "+"<span Style= "font-family:arial, Helvetica, Sans-serif;">Style= "Fill:deepskyblue;stroke-width:2;stroke:rgb (0,0,0);"</span><spanstyle= "font-family:arial, Helvetica, Sans-serif;">></rect>    </span>        </svg>

Code parsing:

The CSS Fill property defines the fill color of the rectangle (RGB value, color name, or hexadecimal value);

The Stroke-width property of the CSS defines the width of the rectangle's border;

The stroke property of the CSS defines the color of the rectangle's border

3. Rectangle Transparency

As follows:

Key code:

<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1">        <rectwidth= "+"Height= "+"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 property of the CSS defines the fill color transparency (the legal range is: 0-1);

The Stroke-opacity property of the CSS defines the transparency of the border color (the legal range is: 0-1);

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

4. Rectangular position

As follows:

Key code:

<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1">        <rectwidth= "+"Height= "+"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= " the"></rect>            </svg>

Code parsing:

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

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

5. Rounded Corners Rectangle

As follows:

Key code:

<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1">        <rectwidth= "+"Height= "+"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= " the"Rx= " the"ry= " the"></rect>            </svg>

Code parsing:

The RX and Ry properties enable the rectangle to produce rounded corners (similar to the CSS3 fillet property)

Well, today's share of the end, I am also learning while sharing, if there is the wrong place please correct me, next time to share the "SVG circle" part, I hope you will visit, thank you.

HTML5 SVG Rectangle Simple Example sharing