Tuesday, 7 November 2017

Representing a SVG rectangle in html 5 Canvas

SVG stands for Scalable Vector Graphics.All of the SVG tags that actually write on the image area occur between the <svg> and a closing tag </svg>.

Example: Representing svg rectangle

<! DOCTYPE html>
<html >
<head>
<title>rectangle</title>
</head>
<body>
<svg width="300" height="150">
<rect x = "100" y = "100" width = "400" height = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
</svg>
</body>
</html>

E.g. Description

  1. rect -The rectangle is declared using a rect element.
  2. x, y-These are the co-ordinates of the top left the corner of the rectangle.
  3. Width, Height -The width and height of the shape. In some cases, these can be expressed as percentages (such as "20%").
  4. Fill -The color to use for the interior of the shape. Colors are explained in more detail in a later section.
  5. Stroke-The color for the line actually drawn for the rectangle.
  6. Stroke-width-The thickness of the line used to draw the rectangle.

No comments:

Post a Comment