如何使用 HTML5 的 svg 元素绘制一个矩形？

推荐答案

<svg width="200" height="100">
  <rect width="150" height="80" x="20" y="10" style="fill:lightblue;stroke:black;stroke-width:2;"/>
</svg>

本题详细解读

SVG 基础

SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，可以使用代码来描述图形。与位图图像不同，SVG 图形可以无损缩放，不会失真。

<svg> 元素

<svg> 元素是 SVG 图形的根元素。它定义了 SVG 画布的宽度和高度。

<svg width="200" height="100">
  <!-- SVG 内容 -->
</svg>

width 和 height 属性分别指定 SVG 画布的宽度和高度，单位为像素 (px)。

<rect> 元素

<rect> 元素用于绘制矩形。它有以下关键属性：

• x: 矩形左上角的 X 坐标。
• y: 矩形左上角的 Y 坐标。
• width: 矩形的宽度。
• height: 矩形的高度。
• style: 可以使用 CSS 样式来设置矩形的颜色、边框等。

示例代码分解

<svg width="200" height="100">
  <rect width="150" height="80" x="20" y="10" style="fill:lightblue;stroke:black;stroke-width:2;"/>
</svg>

1. <svg width="200" height="100">：创建了一个 200 像素宽，100 像素高的 SVG 画布。
2. <rect width="150" height="80" x="20" y="10" style="fill:lightblue;stroke:black;stroke-width:2;"/>：
   • width="150" height="80"：定义了一个 150 像素宽，80 像素高的矩形。
   • x="20" y="10"：设置矩形左上角的坐标为 (20, 10)。这意味着矩形距离 SVG 画布的左边 20 像素，距离顶部 10 像素。
   • style="fill:lightblue;stroke:black;stroke-width:2;"：使用 CSS 样式设置矩形的填充色为浅蓝色 (lightblue)，边框颜色为黑色 (black)，边框宽度为 2 像素 (stroke-width:2)。

总结

这段代码在 SVG 画布中绘制了一个浅蓝色填充，黑色边框的矩形，位置和尺寸均由相关属性控制。