SVG







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



SVG <rect>



❮ Previous
Next ❯



SVG Shapes


SVG has some predefined shape elements that can be used by developers:



  • Rectangle <rect>

  • Circle <circle>

  • Ellipse <ellipse>

  • Line <line>

  • Polyline <polyline>

  • Polygon <polygon>

  • Path <path>


The following chapters will explain each element, starting with the rect element.




SVG Rectangle - <rect>


Example 1


The <rect> element is used to create a rectangle and variations of a rectangle shape:



Sorry, your browser does not support inline SVG.

Here is the SVG code:



Example



<svg width="400" height="110">
 
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

Try it Yourself »

Code explanation:



  • The width and height attributes of the <rect> element define the height and
    the width of the rectangle

  • The style attribute is used to define CSS properties for the rectangle

  • The CSS fill property defines the fill color of the rectangle

  • The CSS stroke-width property defines the width of the border of the rectangle

  • The CSS stroke property defines the color of the border of the rectangle









googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });






Example 2


Let's look at another example that contains some new attributes:



Sorry, your browser does not support inline SVG.

Here is the SVG code:



Example



<svg width="400" height="180">
 
<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>

Try it Yourself »

Code explanation:



  • The x attribute defines the left position of the rectangle (e.g. x="50"
    places the rectangle 50 px from the left margin)

  • The y attribute defines the top position of the rectangle (e.g. y="20"
    places the rectangle 20 px from the top margin)

  • The CSS fill-opacity property defines the opacity of the fill color (legal range: 0 to 1)

  • The CSS stroke-opacity property defines the opacity of the stroke color (legal range: 0 to 1)




Example 3


Define the opacity for the whole element:



Sorry, your browser does not support inline SVG.

Here is the SVG code:



Example



<svg width="400" height="180">
 
<rect x="50" y="20" width="150" height="150"
 
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Try it Yourself »

Code explanation:



  • The CSS opacity property defines the opacity value for the whole element (legal range: 0 to 1)




Example 4


Last example, create a rectangle with rounded corners:



Sorry, your browser does not support inline SVG.

Here is the SVG code:



Example



<svg width="400" height="180">
 
<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>

Try it Yourself »

Code explanation:



  • The rx and the ry attributes rounds the corners of the rectangle




❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?