SVG 矩形rect 学习_svg rect-CSDN博客

本文详细介绍了SVG中使用<rect>标签创建矩形的基本写法，包括填充背景色、边框样式、透明度设置，以及位置调整和圆角矩形的实现。特别关注了不同定位方式对边框的影响和SVG默认宽高的特性。

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

1 基础写法

以下两种写法都可以定义图形的样式，矩形默认的填充颜色是黑色。
< rect > 标签可用来创建矩形。

<svg>
  <rect width="300" height="100"  />
</svg>

<svg>
  <rect style="width:300px;height:100px;"  />
</svg>

效果截图：
在这里插入图片描述

2 填充背景色

fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）。

<svg>
  <rect width="300" height="100" fill="#f00"  />
</svg>

效果截图：
在这里插入图片描述

3 填充边框

stroke-width 属性定义矩形边框的宽度，默认值 1 。
stroke 属性定义矩形边框的颜色（rgb 值、颜色名或者十六进制值），默认没有颜色。

<svg width="300" height="100">
  <rect width="100%" height="100%" fill="#f00" stroke="blue" stroke-width="4"  />
</svg>

效果截图：
在这里插入图片描述

3.1 小发现

3.1.1 给图形定义实际的宽和高时，如果是定义在 rect 元素上，那么添加的边框有偏移，如果定于在 svg 标签上，就没问题，如下示例：

<svg>
  <rect width="300" height="100" fill="#f00" stroke="blue" stroke-width="4"  />
</svg>
<svg width="300" height="100">
  <rect width="100%" height="100%" fill="#f00" stroke="blue" stroke-width="4"  />
</svg>

效果截图：
在这里插入图片描述

3.1.2 发现 svg 标签是默认有宽高的，如下第一个 svg 标签中是没有内容的，可它确占位了。

效果截图：
在这里插入图片描述

4 填充色的透明度

fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）。

<svg width="300" height="100">
  <rect width="100%" height="100%" fill="#f00" fill-opacity="0.1" stroke="blue" stroke-width="4"  />
</svg>

效果截图：
在这里插入图片描述

5 边框色的透明度

stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）。

<svg width="300" height="100">
  <rect width="100%" height="100%" stroke="blue" stroke-opacity="0.5" fill="#f00" stroke-width="4"  />
</svg>

效果截图:
在这里插入图片描述

6 整体的透明度

opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

<svg width="300" height="100">
  <rect width="100%" height="100%" opacity="0.5" fill="#f00" stroke="blue" stroke-width="4"  />
</svg>

效果截图:
在这里插入图片描述

7 位置偏移

x 属性定义矩形的左侧起始位置。
y 属性定义矩形的顶端起始位置。

<svg>
  <rect width="100" height="100" x="50" y="50" fill="#f00" />
</svg>

效果截图：
在这里插入图片描述

8 圆角矩形

rx 和 ry 属性可使矩形产生圆角，值可以是百分比形式（例如 rx=“20%”）

<svg>
  <rect width="300" height="100" rx="20" ry="20"  fill="#f00" />
</svg>

效果截图：
在这里插入图片描述