SVG rectangle
SVG Shapes
SVG has some predefined shape elements that can be used and manipulated by developers:
Rectangle <rect>
circle<circle>
ellipse<ellipse>
line<line>
- ##Polyline<polyline> ##Polygon<polygon>
- Path<path>
- The following chapters will explain these elements to you, starting with the rectangular element.
Example 1
<rect> tag can be used to create rectangles, as well as rectangle variants:
The following is the SVG code:
Instance<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Run instance»Click the "Run instance" button to view the online instance For Opera users: View the SVG file (right-click on the SVG graphic preview source).
- The width and height attributes of the rect element can define the height and width of the rectangle
- The style attribute is used to define CSS properties
- The fill attribute of CSS defines the fill color of the rectangle (rgb value, color name or hexadecimal value)
- The stroke property of CSS defines the color of the rectangular border
Let’s look at another example that contains some new attributes:
Here is the SVG code:
Example<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
</body>
</html>
Run Instance»Click the "Run Instance" button to view the online instanceFor Opera users: View SVG file (right-click Click on the SVG graphic to preview the source).
- #x attribute defines the left position of the rectangle (for example, x="0" defines the rectangle to the left of the browser window The distance from the side is 0px)
- y attribute defines the top position of the rectangle (for example, y="0" defines the distance from the rectangle to the top of the browser window to be 0px)
- The fill-opacity property of CSS defines the transparency of the fill color (the legal range is: 0 - 1)
- The stroke-opacity property of CSS defines the transparency of the stroke color (Legal range is: 0 - 1)
Define the opacity of the entire element:
The following is the SVG code ：
Instance<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
Run instance»Click the "Run instance" button to view the online instance
For Opera users: View SVG files (right-click on the SVG graphic preview source).
The CSS opacity property defines the transparency value of an element (range: 0 to 1).
Example 4
Last example, create a rounded rectangle:
Here is the SVG code:
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
For Opera users : View SVG files (right-click on the SVG graphic preview source).
The rx and ry attributes can make the rectangle have rounded corners.
