SVG如何绘制矩形

大前小白

于 2021-01-18 14:03:15 发布

阅读量2.7k

点赞数 2

分类专栏： SVG 文章标签： svg html css

本文链接：https://blog.youkuaiyun.com/weixin_45195200/article/details/112778195

版权

本文介绍了如何使用SVG中的rect元素绘制矩形，包括设置矩形的宽高、填充颜色、轮廓和圆角。通过示例代码展示了如何创建基本矩形、改变填充颜色以及绘制圆角矩形，并解释了相关属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节我们来学习 SVG 中的矩形。SVG 中设有一些预定义的形状元素，我们可以直接通过这些元素来绘制图形。

基本图形有如下几种：

元素	图形
`<rect>`	矩形
`<circle>`	圆形
`<ellipse>`	椭圆
`<line>`	线
`<polyline>`	折线
`<polygon>`	多边形
`<path>`	路径

直接在 <svg> 元素内使用上述图形元素，就可以轻松绘制出图形啦，本节我们先来讲如何使用 <rect> 元素绘制矩形。

绘制一个矩形

SVG 中的 <rect> 标签可用来创建矩形，通过这个元素中的属性可以设置矩形的宽高、填充颜色、轮廓、尖角、圆角等。

示例：

例如我们绘制一个最基本的矩形，例如我们创建一个300 * 100 的矩形，代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg width=

最低0.47元/天解锁文章