SVG 矩形

SVG <rect>: 绘制矩形

SVG 预定义形状

SVG 提供了一些预定义的形状元素，便于使用。这些包括：

• 矩形：<rect>
• 圆形：<circle>
• 椭圆：<ellipse>
• 线条：<line>
• 折线：<polyline>
• 多边形：<polygon>
• 路径：<path>（用于更复杂的形状）

本章重点介绍 <rect> 元素。

SVG <rect> 元素

示例 1：基本矩形

<rect> 元素用于创建矩形。您可以定义它的位置、大小和外观。

一个带有黑色边框的蓝色矩形。

SVG 代码：

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:blue; stroke-width:3; stroke:black;" />
</svg>

核心属性与样式：

• width：矩形的宽度。
• height：矩形的高度。
• style：这里用于行内 CSS 属性。或者，也可以使用演示属性（例如，fill="blue"）或外部 CSS。
• fill：（CSS 属性）定义矩形的填充颜色。
• stroke-width：（CSS 属性）定义矩形边框的宽度。
• stroke：（CSS 属性）定义矩形边框的颜色。

注意：默认情况下，如果未指定 x 和 y，矩形的左上角位于 (0,0)。

示例 2：定位与透明度

控制位置和透明度：

一个半透明的蓝色矩形，带有半透明的粉色边框，偏移了左上角的位置。

SVG 代码：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
        style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.3; stroke-opacity:0.7;" />
</svg>

附加属性与样式：

• x：矩形左上角的 x 坐标。
• y：矩形左上角的 y 坐标。
• fill-opacity：（CSS 属性）定义填充颜色的不透明度（0.0 到 1.0）。
• stroke-opacity：（CSS 属性）定义边框颜色的不透明度（0.0 到 1.0）。

示例 3：整体元素透明度

设置整个元素的透明度：

一个半透明矩形（填充和边框均受到同等影响），带有蓝色填充和粉色边框。

SVG 代码：

<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>

代码解释：

• opacity：（CSS 属性）定义整个元素的不透明度，包括其填充和边框（0.0 到 1.0）。

示例 4：圆角

创建带圆角的矩形：

一个半透明的红色矩形，带有黑色边框和圆角。

SVG 代码：

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150" rx="20" ry="20"
        style="fill:red; stroke:black; stroke-width:5; opacity:0.5;" />
</svg>

圆角属性：

• rx：用于圆角的椭圆的 x 轴半径。
• ry：用于圆角的椭圆的 y 轴半径。如果未指定 ry，则默认与 rx 的值相同。

实际应用：

矩形用途广泛：可用于背景、按钮、柱状图、布局容器，以及任何需要矩形形状（可选择带圆角）的设计。为了可访问性，如果矩形传达特定含义，请考虑添加 <title> 和 <desc> 元素。