We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

rect元素是SVG的一个基本形状,用来创建矩形,基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。

用法

类别基本元素, 图形元素, 形状元素
允许的内容物任意数量、任意排序的下列元素:
动画元素
描述性元素

示例

简单矩形

源代码 输出结果
<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>

» rect-1.svg

圆角矩形

源代码 输出结果
<?xml version="1.0"?>
<svg width="120" height="120"
     viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10"
        width="100" height="100"
        rx="15" ry="15"/>

</svg>

» rect-2.svg

属性

全局属性

专有属性

DOM 接口

这个元素实现了 SVGRectElement 接口。

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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) 未实现 (Yes) 3.0.4

该表格基于这些资源

参见

文档标签和贡献者

标签: 
此页面的贡献者: Sebastianz, fanxiaojie, e26h
最后编辑者: Sebastianz,