Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/svg/elements/rect below:

rect · WebPlatform Docs

The rect element is a SVG basic shape to create a rectangle starting with a given with and height beginning at a x- and y-point.

DOM Interface

SVGRectElement

In the following code example, the rect element is used to draw a purple rectangle.

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="100" height="80" fill="purple" />
</svg>

[View live example](http://code.webplatform.org/gist/44786e14924371effbe4)

In the following code example, the rect element is used to create a orange rectangle with rounded corners.

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="100" height="80" fill="orange" rx="10" ry="10" />
</svg>

[View live example](http://code.webplatform.org/gist/9697f0fe090f4ad2e6e9)

• Conditional processing attributes

• Core attributes

• Graphical events attributes

• Presentation attributes

• style

• class

• externalResourcesRequired

• transform

• x
• y
• width
• height
• rx
• ry

This element implements the SVGRectElement interface.

The SVGRectElement object has these events:

• onload: Occurs when the browser has fully parsed the element and all of its descendants.

The SVGRectElement object has these methods:

• getBBox: Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
• getCTM: Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
• getScreenCTM: Gets the transformation matrix from the current user units to the screen coordinate system.
• getTransformToElement: Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
• hasExtension: Determines if the specified extension is supported.

The SVGRectElement object has these properties:

• className: Gets the names of the classes that are assigned to this object.
• clipPath: Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
• externalResourcesRequired: Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
• farthestViewportElement: Gets a value that represents the farthest ancestor svg element.
• fill: Sets or retrieves a value that indicates the color to paint the interior of the given graphical element.
• fillOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
• fillRule: Sets or retrieves a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
• focusable: Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
• height: Gets or sets the height of an element.
• mask: Sets or retrieves a value that indicates a SVG mask.
• nearestViewportElement: Gets a value that indicates which element established the current viewport.
• ownerSVGElement: Gets the nearest ancestor svg element.
• pointerEvents: Sets or retrieves a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
• requiredExtensions: Gets a white space-delimited list of required language extensions.
• requiredFeatures: Gets or sets a white space-delimited list of feature strings.
• rx: Gets or sets the x-axis radius of a rounded corner rectangle.
• ry: Gets or sets the y-axis radius of a rounded corner rectangle.
• stroke: Sets or retrieves a value that indicates the color to paint along the outline of a given graphical element.
• strokeDasharray: Sets or retrieves one or more values that indicate the pattern of dashes and gaps used to stroke paths.
• strokeDashoffset: Sets or retrieves a value that specifies the distance into the dash pattern to start the dash.
• strokeLinecap: Sets or retrieves a value that specifies the shape to be used at the end of open subpaths when they are stroked.
• strokeLinejoin: Sets or retrieves a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
• strokeMiterlimit: Sets or retrieves a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
• strokeOpacity: Sets or retrieves a value that specifies the opacity of the painting operation that is used to stroke the current object.
• strokeWidth: Sets or retrieves a value that specifies the width of the stroke on the current object.
• style: Gets a style object.
• systemLanguage: Gets or sets a comma-separated list of language names.
• transform: Gets the value of a transform attribute.
• viewportElement: Gets the element that established the current viewport.
• width: Defines the width of an element.
• x: Gets or sets the x-coordinate value.
• xmlbase: Gets or sets the base attribute on the element.
• xmllang: Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
• xmlspace: Gets or sets a value that indicates whether white space is preserved in character data.
• y: Gets or sets the y-coordinate value.

The ‘rect’ element

W3C Recommendation

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4