rect

我们的志愿者还没有将这篇文章翻译为 中文 (简体) 。加入我们帮助完成翻译！

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.

Usage context

Categories Basic shape element, Graphics element, Shape element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Normative document SVG 1.1 (2nd Edition)

Example

Simple rect usage

Source code Output result 
<?xml version="1.0"?>
<svg width="120" height="120" 
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
	
	<rect x="10" y="10" width="100" height="100"/>
	
</svg>

» rect-1.svg

rect with rounded corners

Source code Output result 
<?xml version="1.0"?>
<svg width="120" height="120" 
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
	
	<rect x="10" y="10" 
	      width="100" height="100"
	      rx="15" ry="15"/>
	
</svg>

» rect-2.svg

Attributes

Global attributes

Specific attributes

DOM Interface

This element implements the SVGRectElement interface.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.5 (1.8) 9.0 8.0 3.0.4
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.8) Not supported (Yes) 3.0.4

The chart is based on these sources.

See also

附件

文件 大小 日期 附加者为
rect-1.svg
201 字节 2011-02-07 15:42:06 Jeremie
rect-2.svg
234 字节 2011-02-07 15:42:06 Jeremie

Document Tags and Contributors

标签：
Contributors to this page: Wjjohnst, gemy_c, Manuel_Strehl, kscarfone, Jeremie
最后编辑者: kscarfone,