SVG中的rect元素

目录

1. 摘要
2. 正文
   1. 作用
   2. attribute
      1. x
      2. y
      3. width
      4. height
      5. rx
      6. ry
3. 参考资料

---

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/13/SVG%E4%B8%AD%E7%9A%84rect%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

1. 作用
2. attribute

正文

作用

绘制矩形

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100"/>
</svg>

示例：圆角矩形

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="100" height="100" rx="5" ry="5"/>
</svg>

attribute

x

四个顶点中最小的 x 值

y

四个顶点中最小的 y 值

width

宽

height

高

rx

x 方向上的圆角半径

ry

y 方向上的圆角半径

参考资料

• rect

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/13/SVG%E4%B8%AD%E7%9A%84rect%E5%85%83%E7%B4%A0/

---

本文对你有帮助？请支持我

---

支付宝

微信

---

• 本文作者： jsweibo
• 本文链接： https://jsweibo.github.io/2019/12/13/SVG%E4%B8%AD%E7%9A%84rect%E5%85%83%E7%B4%A0/
• 版权声明： 除非另有说明，否则本网站上的内容根据署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。