SVG 矩形

SVG 形状

SVG 具有一些预定义的形状元素，可供开发人员使用：

矩形 <rect>
圆 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

以下各章将从 rect 元素开始解释每个元素。

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代码说明：

rx 和 ry 属性使矩形的角变圆

SVG 形状

SVG矩形-<rect>

相关页面