SVG如何绘制矩形

最新推荐文章于 2025-01-29 06:06:19 发布

大前小白

最新推荐文章于 2025-01-29 06:06:19 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： 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>

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大前小白

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

SVG 矩形 – SVG Rectangle (3)

https://shixuebin.gitee.io/hexo-blog/

01-25

255

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML格式。SVG Rectangle 是 SVG 中一种基本的图形元素，用于绘制矩形。通过 rect 元素，你可以在 SVG 图形中定义矩形的形状、位置和大小。

svg图形的绘制

sh2001824的博客

07-16

5057

svg图形的绘制

1 条评论您还未登录，请先登录后发表或查看评论

SVG 绘制矩形

ivenqin的博客

12-23

2044

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

SVG系列教程01绘制SVG矩形

web前端开发

10-21

475

一个<rect>元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。一个S...

svg之矩形

涛哥~梦

01-02

436

<!docType html> <html> <head> <title>svg demo</title> <style> .rectangle { width: 300px; height: 100...

【编程语言】SVG 语法入门教程（绘制矩形、圆形、椭圆、多边形等）

热门推荐

知不足而奋进，望远山而前行

02-07

1万+

SVG 是使用 XML 来描述二维图形和绘图程序的语言。在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版

突破编程_前端_SVG（rect 矩形）

突破编程

04-10

3596

前端 SVG：rect 矩形

html svg矩形添加文字,如何在SVG矩形中放置和居中文本

weixin_35848310的博客

06-07

2493

SVG 1.2微小的添加文本换行，但大多数SVG的实现，你会在浏览器中找到(Opera除外)没有实现这个功能。通常由您，开发人员手动定位文本。SVG 1.1规范提供了对此限制的一个很好的概述，以及克服它的可能的解决方案：Each ‘text’ element causes a singlestring of text to be rendered. SVGperforms no automatic...

4. SVG基本图形绘制教程

一名全栈开发工程师

05-10

905

基本的SVG图形绘制的教程说明

通过SVG标签绘制矩形、圆、椭圆、线段、多条线、多边形

03-25

通过SVG标签绘制矩形、圆、椭圆、线段、多条线、多边形

SVG 教程（二）矩形

Just Code

07-15

395

SVG <rect> SVG Shapes SVG有一些预定义的形状元素，可被开发者使用和操作：矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path>

SVG绘制矩形简单示例分享

唐一峰

02-22

2361

最近我初学HTML5，刚在一步步学习SVG，积累了一些个人心得和程序代码，希望和大家分享，今天分享“svg之矩形”部分 1、简单矩形效果图如下：关键代码：代码解析：rect 元素代表矩形；width 和 height 属性可定义矩形的高度和宽度；2、矩形填充颜色及边框效果图如下：关键代码：

SVG制作圆角矩形代码

01-24

代码只包含一个circlerect.svg和circlerect.html文件，.svg收藏起来，以后用到的时候，可直接使用，不用再费脑筋去想，去查阅资料了。

[html] 使用svg画出一个矩形

歌谣的博客

03-13

455

[html] 使用svg画出一个矩形 <svg width="400" height="200" viewbox="0 0 2000 1000"> <rect x="200" y="100" width="400" height="200" style="fill: blue"></rect> </svg> 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 ...

SVG 矩形：深入理解与实际应用

lsx202406的博客

01-29

407

SVG矩形是SVG图形中的一种基本形状，具有丰富的属性和绘制方法。在实际应用中，SVG矩形可以与动画、其他SVG元素等结合，实现各种复杂效果。掌握SVG矩形的相关知识，有助于我们更好地在网页上创建美观、实用的矢量图形。

【HTML5】svg 绘制图形

qq_45677671的博客

06-30

5284

SVG 绘制图形教程

SVG绘制矩形

12-30

944

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="400" height="400" version="1.1" xmlns="http://www

4.SVG 矩形（rect）

liuhao9999的博客

03-28

3235

SVG 形状（Shapes）就像画板应用一样，SVG为开发者提供了一些预定义的形状元素，以便于快速应用：方形 <rect> 圆形 <circle> 椭圆 <ellipse> 线条 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 后续章节我们将逐个介绍这些图形元素，先从方形及其一些变体开始。由于SVG代码可读性较高，我们就使用实例代码结合代码解释的方式来学习。

利用SVG path绘制图形--基本图形

echo的专栏

07-06

1万+

这里介绍的几个基本的形状用于大多数的SVG绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数SVG文档中，所以很有必要在这里介绍这部分元素。基本形状EDIT 要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定

svg点击按钮绘制矩形

最新发布

03-22

### 使用 SVG 和 JavaScript 实现点击按钮绘制矩形要通过点击按钮使用 SVG 绘制矩形，可以利用 HTML 的 `<svg>` 元素以及其子元素 `<rect>` 来完成。以下是具体方法： #### 创建基本结构 HTML 提供了一个容器用于放置 SVG 图像，并通过 JavaScript 动态创建和操作矩形对象。 ```html <button id="drawRectBtn">绘制矩形</button> <svg id="mySvg" width="500" height="300" style="border:1px solid black;"></svg> ``` 上述代码片段中定义了一个按钮 `#drawRectBtn` 用于触发绘图逻辑，同时提供了一个大小为 500×300 像素的 SVG 容器 `#mySvg`[^3]。 #### 编写 JavaScript 逻辑当用户点击按钮时，JavaScript 将动态向 SVG 中添加一个新的 `<rect>` 元素表示矩形。 ```javascript document.getElementById('drawRectBtn').addEventListener('click', function() { const svgNS = "http://www.w3.org/2000/svg"; // 创建新的 rect 元素 let newRect = document.createElementNS(svgNS, 'rect'); // 设置属性 newRect.setAttribute('x', Math.random() * 400); // 随机位置 (x 方向) newRect.setAttribute('y', Math.random() * 250); // 随机位置 (y 方向) newRect.setAttribute('width', 50); // 矩形宽度 newRect.setAttribute('height', 30); // 矩形高度 newRect.setAttribute('fill', 'blue'); // 填充颜色 // 添加到 SVG 容器 document.getElementById('mySvg').appendChild(newRect); }); ``` 此脚本实现了每次点击按钮都会随机生成一个小蓝矩形并附加至指定的 SVG 容器内[^4]。 #### 关键技术点解析 - **SVG Namespace**: 所有 SVG 元素都需声明命名空间 `"http://www.w3.org/2000/svg"`，这是标准规定的一部分。 - **setAttribute 方法**: 此方法用来设置新创建节点的各种属性值，如坐标 (`x`, `y`)、尺寸 (`width`, `height`) 及样式 (`fill`)。 - **Math.random 函数**: 这里被用来模拟不同位置上的矩形生成过程，实际应用可根据需求调整算法或固定数值[^5]。 ### 结论以上展示了如何借助简单的 DOM 操作配合 SVG 技术实现基于交互行为（即按钮点击）下的图形渲染功能。这种方法不仅适用于基础形状绘制，还可以扩展支持更复杂的动画效果或者响应式设计模式。