SVG basics | draw SVG rectangles-

A rect element represents a rectangle. With this element, you can draw rectangles with different widths, heights, and strokes and colors. At the same time, it can also draw a rectangle with a right angle or rounded corner ....,.
One An element represents an SVG rectangle. With this element, you can draw rectangles with different widths, heights, and strokes and colors. It can also draw a rectangle with a right angle or rounded corner.

　　 A simple example of SVG rectangle

The following is a simple example of drawing an SVG rectangle.

1. 
   
2. 
   
4. Style = "stroke: #006600; fill: #00cc00"/>
   
5. 
   

The position of the SVG rectangle is determined by the x and y attributes. Remember that this position is the closest to any parent element.

The size of the SVG rectangle is determined by the width and height attributes.

The style attribute allows you to set additional styles for the rectangle, such as stroke color, stroke width, and fill color.

The following figure shows the returned results of the above Code:



　　 Rounded rectangle

We can also draw SVG rectangles with rounded corners. The rx and ry attributes are used to determine the size of the rounded corner of a rectangle. The rx attribute determines the width of the rounded corner, and the ry attribute determines the width of the rounded corner. In the following example, the rounded corners of the three rectangles are set to 5 pixels, 10 pixels, and 15 pixels respectively. Observe the variation of their rounded corners.

1. 
   
2. 
   
4. Rx = "5" ry = "5"
   
5. Style = "stroke: #006600; fill: #00cc00"/>
   
7. Rx = "10" ry = "10"
   
8. Style = "stroke: #006600; fill: #00cc00"/>
   
10. Rx = "15" ry = "15"
    
11. Style = "stroke: #006600; fill: #00cc00"/>
    

The returned results of the above Code are as follows:



In the preceding example, the rx and ry values of the three rounded rectangles are the same. If you set the rx value separately, the ry value is the same as the rx value. This is short for defining the SVG rounded rectangle.

In the following two examples, the rx value is set to 10 pixels, but the ry value is set to 5 pixels and 15 pixels respectively. The two examples show that the width and height of the rectangular rounded corner are different.

1. 
   
2. 
   
4. Rx = "10" ry = "5"
   
5. Style = "stroke: #006600; fill: #00cc00"/>
   
7. Rx = "10" ry = "15"
   
8. Style = "stroke: #006600; fill: #00cc00"/>
   

　　 The returned results of the above Code are as follows:



　 Stroke rectangle

You can use the stroke attribute to set the border attribute of the SVG rectangle. In the following example, the border of the rectangle is set to green and the Border width is 3 pixels.

2. Style = "Stroker: #009900;
   
3. Stroke-width: 3;
   
4. Fill: none;
   
5. "
   
6. />

The returned results of the above Code are as follows:



You can also use the stroke-dasharray attribute to set the border of a rectangle to a dotted line. See the following example:

2. Style = "Stroker: #009900;
   
3. Stroke-width: 3;
   
4. Stroke-dasharray: 10 5;
   
5. Fill: none;
   
6. "
   
7. />

The returned results of the above Code are as follows:



　　 Fill rectangle

You can use the fill attribute to fill the color of the SVG rectangle. For example, fill the rectangle color with none.

2. Style = "Stroker: #009900;
   
3. Fill: none;
   
4. "
   
5. />

In this case, the fill color of the SVG rectangle will be the same as the page color of the browser.



You can also choose a color to fill the rectangle. In the following example, the rectangle is green.

2. Style = "Stroker: #009900;
   
3. Fill: #33ff33;
   
4. "
   
5. />

Finally, you can use the fill-opacity attribute to set the transparency of the filled rectangle. In the following example, the two sentences are superimposed, and the top rectangle is set to a fill transparency of 50%.

2. Style = "Stroker: #009900;
   
3. Fill: #33ff33;
   
4. "
   
5. />
   
7. Style = "Stroker: #000099;
   
8. Fill: # 3333ff;
   
9. Fill-opacity: 0.5;
   
10. "
    
11. />

The returned results of the above Code are as follows:



This article copyright belongs to the jQuery house, reproduced please indicate the source: http://www.htmleaf.com/ziliaoku/... g/201506031964.html