HTML5 SVG学习笔记

什么是SVG？

SVG（Scalable Vector Graphics），中文称为可缩放矢量图形，是一种基于XML语言的图像格式，用于定义二维图形和图形应用程序。与位图不同，它可以在任何分辨率下被无损地放大而不失真或失去精度。

SVG的基本语法

SVG文件的基本语法如下所示：

xmlCopy Code
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="red"/>
</svg>

其中，<?xml version="1.0" encoding="UTF-8"?>是XML声明；<svg>元素是SVG根元素，定义了画布的宽度和高度；<rect>元素是绘制矩形的元素，指定了矩形的位置，大小和颜色等属性。

常用的SVG元素

矩形（<rect>）

矩形元素用于绘制矩形，语法如下：

xmlCopy Code
<rect x="x坐标" y="y坐标" width="宽度" height="高度" fill="填充颜色"/>

例如，以下代码绘制一个红色的矩形：

xmlCopy Code
<rect x="50" y="50" width="200" height="100" fill="red"/>

圆形（<circle>）

圆形元素用于绘制圆形，语法如下：

xmlCopy Code
<circle cx="圆心x坐标" cy="圆心y坐标" r="半径" fill="填充颜色"/>

例如，以下代码绘制一个蓝色的圆形：

xmlCopy Code
<circle cx="150" cy="100" r="50" fill="blue"/>

椭圆（<ellipse>）

椭圆元素用于绘制椭圆，语法如下：

xmlCopy Code
<ellipse cx="中心x坐标" cy="中心y坐标" rx="水平半径" ry="垂直半径" fill="填充颜色"/>

例如，以下代码绘制一个黄色的椭圆：

xmlCopy Code
<ellipse cx="150" cy="100" rx="100" ry="50" fill="yellow"/>

直线（<line>）

直线元素用于绘制直线，语法如下：

xmlCopy Code
<line x1="起点x坐标" y1="起点y坐标" x2="终点x坐标" y2="终点y坐标" stroke="线条颜色" stroke-width="线条宽度"/>

例如，以下代码绘制一条绿色的直线：

xmlCopy Code
<line x1="50" y1="50" x2="250" y2="150" stroke="green" stroke-width="5"/>

实例

下面是一个综合运用上述几种SVG元素的示例代码，绘制了一个简单的笑脸：

xmlCopy Code
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
  <circle cx="200" cy="200" r="150" fill="yellow"/>
  <circle cx="140" cy="150" r="30" fill="black"/>
  <circle cx="260" cy="150" r="30" fill="black"/>
  <path d="M150 260 Q200 300 250 260" stroke="black" stroke-width="10" fill="none"/>
</svg>

效果预览：

以上是HTML5 SVG的学习笔记及实例，希望对您有所帮助！