SVG:rect

From MDC

« SVG Reference home    [ Examples | Attributes | Properties | Methods | Related ]

The rect element is an SVG basic shape, used to create rectangles based on the position of a corner and their width and height. It may also be used to create rectangles with rounded corners.

The rect element can be recreated using paths or polyline segments. The exact definition of how to draw a rect using a path (with or without rounded corners) is given in the SVG specification.

[edit] Example

<?xml version="1.0" standalone="no"?>
<svg width="120" height="120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100"
     rx="10" ry="10"
     fill="red" stroke="black"/>
</svg>

[edit] Attributes

SVG Presentation : Fill-Stroke Attributes fill, fill-opacity, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width,

SVG Presentation : Graphics Attributes clip-path, clip-rule, cursor, display, filter, image-rendering, mask, opacity, pointer-events, shape-rendering, text-rendering, visibility

SVG Element Event Attributes onactivate, onclick, onfocusin, onfocusout, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, stroke-width,

SVG Language Space Attributes xml:space

SVG Standard Attributes xml:base

x y width height rx ry class externalResourcesRequired style transform

[edit] Properties

[edit] Methods

[edit] Related

Elements

path

Interfaces

External Examples

W3Schools example