SVG如何绘制矩形

最新推荐文章于 2024-01-27 16:20:11 发布

VIP文章大前小白

最新推荐文章于 2024-01-27 16:20:11 发布

阅读量2.5k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45195200/article/details/112778195

版权

本节我们来学习 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元/天解锁文章

大前小白

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
SVG如何绘制矩形

本节我们来学习 SVG 中的矩形。SVG 中设有一些预定义的形状元素，我们可以直接通过这些元素来绘制图形。基本图形有如下几种：元素图形<rect>矩形<circle>圆形<ellipse>椭圆<line>线<polyline>折线<polygon>多边形<path>路径直接在 <svg> 元素内使用上述图形元素，就可以轻松绘制出图形啦
复制链接

扫一扫