SVG矩形-<rect>
<rect>元素用于创建矩形和矩形形状的变体：
下面是 SVG 代码：
示例1
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 矩形</h1>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
尝试一下
SVG代码说明：
- <rect> 元素的 width 和 height 属性定义矩形的高度和宽度
- 样式属性用于定义矩形的 CSS 属性
- CSS fill 属性定义矩形的填充颜色
- CSS stroke-width 属性定义矩形边框的宽度
- CSS 笔触属性定义矩形边框的颜色
让我们看另一个包含一些新属性的示例：
下面是 SVG 代码：
示例2
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 矩形</h1>
<svg width="400" height="180">
<rect rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
</body>
</html>
尝试一下
SVG代码说明：
- x 属性定义了矩形的左侧位置（例如，x =“50” 将矩形放置在距左边距 50 像素的位置）
- y 属性定义矩形的顶部位置（例如 y =“20” 将矩形距顶部边缘 20 像素放置）
- CSS fill-opacity 属性定义填充颜色的不透明度（合法范围：0到1）
- CSS stroke-opacity 属性定义笔触颜色的不透明度（合法范围：0到1）
定义整个元素的不透明度：
下面是 SVG 代码：
示例3
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 矩形不透明度</h1>
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
尝试一下
SVG代码说明：
- CSS opacity 属性定义整个元素的不透明度值（合法范围：0到1）
最后一个示例，创建一个带有圆角的矩形：
下面是 SVG 代码：
示例4
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
</head>
<body>
<h1>SVG 带有圆角的矩形</h1>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
尝试一下
SVG代码说明：
