SVG 实例学习笔记

本篇学习笔记旨在介绍 SVG 图形的基础知识与实践示例，希望能够帮助读者更好地了解 SVG，并在实际项目中应用它。

1. SVG 常用属性

SVG 是一种基于 XML 的图像格式，全称为可缩放矢量图形（Scalable Vector Graphics）。与传统的位图格式（如 JPEG、PNG 等）不同，SVG 是一种矢量图形，它通过描述图形中的各个形状和元素来创建图像。下面是一些常用的 SVG 属性：

• width：设置 SVG 元素的宽度。
• height：设置 SVG 元素的高度。
• viewBox：定义 SVG 视口区域。
• fill：指定 SVG 元素内部的填充颜色。
• stroke：指定 SVG 元素边框的颜色。
• stroke-width：指定 SVG 元素边框的宽度。

2. SVG 实例

下面我们来看一些实际应用的 SVG 示例。

2.1 绘制矩形

htmlCopy Code
<svg width="100" height="100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
</svg>

这段代码会绘制一个红色的正方形。

2.2 绘制圆形

htmlCopy Code
<svg width="100" height="100">
  <circle cx="50" cy="50" r="30" fill="green" />
</svg>

这段代码会绘制一个绿色的圆形。

2.3 绘制线条

htmlCopy Code
<svg width="100" height="100">
  <line x1="0" y1="0" x2="100" y2="100" stroke="blue" stroke-width="2" />
</svg>

这段代码会绘制一条蓝色的线条。

2.4 绘制文本

htmlCopy Code
<svg width="100" height="100">
  <text x="50" y="50" font-size="24" fill="black">Hello, SVG!</text>
</svg>

这段代码会在 SVG 中绘制一个黑色的文本“Hello, SVG!”。

结语

以上就是本篇学习笔记的全部内容，希望通过这些示例能够帮助初学者更好地了解和运用 SVG。如果您对 SVG 还有其他的疑问或者想了解更多相关知识，建议查阅相关资料或者官方文档。