SVG 参考手册学习笔记

什么是SVG？

SVG指可缩放矢量图形（Scalable Vector Graphics），是一种基于XML语言描述的2D图形格式。与像素点构成的位图不同，SVG图形是由线条、多边形、注释等元素组成的，所以可以无限缩放而不失真。

SVG的应用场景

SVG图形广泛应用于网页设计和数据可视化中，常见的应用场景包括：

• 图表展示：可用于绘制各种图表和统计图形；
• 地图：可以实现矢量地图并添加交互式元素；
• 图标：可以生成各种风格和大小的图标；
• 动态效果：可以结合CSS动画或JavaScript实现各种动态效果。

常用的SVG标签

<svg>

SVG图形的根元素，可以定义图形的宽度、高度、背景色等属性。

示例代码：

htmlCopy Code
<svg width="200" height="200" style="background-color: #eee;"></svg>

<rect>

绘制矩形元素。

示例代码：

htmlCopy Code
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="blue"></rect>
</svg>

<circle>

绘制圆形元素。

示例代码：

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

<line>

绘制直线元素。

示例代码：

htmlCopy Code
<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="2"></line>
</svg>

SVG样式属性

SVG图形可以通过CSS样式进行控制，常见的样式属性包括：

• fill：填充颜色；
• stroke：描边颜色；
• stroke-width：描边宽度；
• opacity：不透明度。

示例代码：

htmlCopy Code
<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="blue" stroke="black" stroke-width="2" opacity="0.5"></rect>
</svg>

以上是本文的部分内容，更多SVG标签和样式属性请参考官方文档。