svg教程·画矩形

马黑黑

画矩形

指令：rect()

参数：x, y, width, height, fill, stroke, stroke-width, rx, ry

语法：rect(x, y, width, height, fill, stroke, stroke-width, rx, ry)

其中：

① x - 矩形左上角X坐标值，数值
② y - 矩形左上角Y坐标值，数值
③ width - 矩形宽度值，数值
④ height - 矩形高度值，数值
⑤ fill - 填充色，颜色值（字符型）
⑥ stroke - 描边色，颜色值（字符型）
⑦ stroke-width - 描边线厚度，数值
⑧ rx - 矩形水平方向圆角半径，数值
⑨ ry - 矩形垂直方向圆角半径，数值
*   数值可以不用引号，字符型需要使用引号，百分比视为字符型

矩形常规参数（即SVG矩形标签属性）较多，实际绘制时至少需要前四个属性，这将得到一个黑色填充的矩形（下方演示的第一个矩形即是）。SVG矩形可以拥有圆角半径属性，分为X方向和Y方向方向两个半径，分别记作 rx、ry。这两个半径只设一个时，另一个缺省值与之相等，当任意一个设置为0时，另一个的设置无效；圆角半径的值为纯数字时视为使用px做单位，支持百分比，在 svgdr 百分比需要使用引号。看看svgdr绘制矩形的几种方法：

绘制代码：

sc.onload = () => {
	var dr = _dr(msvg); //声明画笔
	//开始绘制
	dr.rect(20, 20, 160, 60);
	dr.rect(20, 120, 160, 60, 'cornflowerblue');
	dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
	dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
	dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
	dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
	dr.rect(220, 220, 160, 60, 'none', 'indigo');
	dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
	dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
	dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
	//下面使用其他指令以追加方式继续绘制
	dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
	dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
	dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
	dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};

	

上面绘制指令生成的SVG代码如下：

本节示例svgdr画矩形的完整代码：

<svg id="msvg" width="800" height="400"></svg>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
var dr = _dr(msvg);
	dr.rect(20, 20, 160, 60);
	dr.rect(20, 120, 160, 60, 'cornflowerblue');
	dr.rect(20, 220, 160, 60, 'cornflowerblue', 'indigo');
	dr.rect(20, 320, 160, 60, 'cornflowerblue', 'indigo', 4);
	dr.rect(220, 20, 160, 60, 'cornflowerblue', 'indigo', 4, 8);
	dr.rect(220, 120, 160, 60, 'cornflowerblue', 'indigo', 4, 8, 16);
	dr.rect(220, 220, 160, 60, 'none', 'indigo');
	dr.rect(220, 320, 160, 60, 'none', 'indigo', 4);
	dr.rect(420, 20, 160, 60, 'none', 'indigo', 4, 8);
	dr.rect(420, 120, 160, 60, 'none', 'indigo', 4, 8, 16);
	dr.rect(420, 220, 160, 60, 'forestgreen').rx(16);
	dr.rect(420, 320, 160, 60, 'forestgreen').rx(16).ry(32);
	dr.rect(620, 20, 160, 160, 'forestgreen').rx('50%');
	dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);
};
</script>
	

完整代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。

返回目录

梦江南

黑黑老师早上好！

梦江南

我听课来了。

红影

我想到了前面四项的设置，却忘记最后两项的圆角半径的事了

红影

这个是前三节课程里参数最多的了，有九项呢，但不难理解，4+3+2 ，指向都很清楚。还有对应的例图，非常清晰的讲解。

红影

“两个半径只设一个时，另一个缺省值与之相等，当任意一个设置为0时，另一个的设置无效；”

这个黑黑在其他教学里讲过的，这里再加深一下印象

花飞飞

矩形里还混进来两个圆形~~
把宽高设置一样大小，再加rx('50%').和ry('50%').就变圆了啊。。
有了圆角设置果然可以任意变形。。

花飞飞

还真是所有图形都是近亲。。
矩形能跟圆扯上关系，还这么自然而然。。。
那么，画圆的方法又多一种，先画个正方形再追加一句50%
还有，三角形能不能圆角啊。。

花飞飞

这里的主要参数依然尊照按顺序，颜色缺席需占位的规则。。
dr.rect(620, 220, 160, 160, 'forestgreen').ry('50%').stroke('indigo', 6);这里不要rx.只要ry，又没人给rx占位，就追加的方式来描述ry和stroke参数。。。是这意思吧。。
既讲规则，又相对灵活。。

花飞飞

rx('50%');ry('50%').效果大不相同啊。。。
ry改一点点数据就不圆了。。rx怎么改都是圆的，除非改到10以下。。
奇了。。明明宽高都是160

马黑黑

花飞飞 发表于 2024-11-3 08:55
矩形里还混进来两个圆形~~
把宽高设置一样大小，再加rx('50%').和ry('50%').就变圆了啊。。
有了圆角设置 ...

好玩吧

马黑黑

花飞飞 发表于 2024-11-3 08:58
还真是所有图形都是近亲。。
矩形能跟圆扯上关系，还这么自然而然。。。
那么，画圆的方法又多一种，先画 ...

三角形属于多边形，多边形没有 rx 和 ry 属性。这是隔了太多代，是远近亲。

马黑黑

花飞飞 发表于 2024-11-3 09:08
rx('50%');ry('50%').效果大不相同啊。。。
ry改一点点数据就不圆了。。rx怎么改都是圆的，除非改到10以下 ...

这个原理和CSS的 border-radius 的取值方式一样

马黑黑

花飞飞 发表于 2024-11-3 09:06
这里的主要参数依然尊照按顺序，颜色缺席需占位的规则。。
dr.rect(620, 220, 160, 160, 'forestgreen').r ...

灵活是必须的

马黑黑

梦江南 发表于 2024-11-3 08:23
黑黑老师早上好！

马黑黑

红影 发表于 2024-11-3 08:24
我想到了前面四项的设置，却忘记最后两项的圆角半径的事了

最初设计的时候，矩形的圆角半径紧跟在 height 之后，后来觉得不方便，把它们放后面去

马黑黑

红影 发表于 2024-11-3 08:28
这个是前三节课程里参数最多的了，有九项呢，但不难理解，4+3+2 ，指向都很清楚。还有对应的例图，非常清晰 ...

共通的东东很多

小文

收藏备用！问好先生！

花飞飞

马黑黑 发表于 2024-11-3 11:35
好玩吧

就它俩最好玩了。。混在里面装矩形。。

花飞飞

马黑黑 发表于 2024-11-3 11:43
三角形属于多边形，多边形没有 rx 和 ry 属性。这是隔了太多代，是远近亲。

远亲是远亲，近亲是近亲~~远近亲是哪里的亲戚呀。。
我恍惚记得折角可以是圆的，我去翻翻教程。。