前端入门学习笔记（十）HTML5基础（四）SVG 矢量图形

SVG介绍

什么是SVG？

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用于定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
• SVG 是万维网联盟的标准
• SVG 与 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG优势（相对于其他图片格式如JPG）

• SVG 图像可通过文本编辑器来创建和修改
• SVG 图像可被搜索、索引、脚本化或压缩
• SVG 是可伸缩的
• SVG 图像可在任何的分辨率下被高质量地打印
• SVG 可在图像质量不下降的情况下被放大

使用SVG绘制图形

1.圆形<circle>

<svg width="1000" height="1000">
   <circle cx="100" cy="50" r="40" fill="red" />
</svg>

• width与hight设置绘制图形区域的大小（从左上角开始）
• cx为circle x的缩写，cy为circle y的缩写，所以cx为x坐标，cy为y坐标。没有设置的话，默认为0（页面的左上角为0,0）
• r为半径。
• fill 的意思为充满，实例代码中fill=“red”，也就是充满红色的意思。

运行结果如下所示

---

2.矩形<rect>

<svg width="1000" height="1000">
   <rect width="400" height="200" x="20" y="20" fill="red" />
</svg>

rect 标签内的width与hight用于设置矩形的长与高
运行结果如下所示

---

3.直线<line>

<svg width="500" height="510">
    <line x1="20" y1="20" x2="300" y2="200" 
        style="stroke:#000000; stroke-linecap:round; 
        stroke-width:20"  />
</svg>

• x1,y1,x2,y2分别为两个点的坐标
• style在所有的SVG画图的标签中都适用
• stroke为描边属性：
  1.stroke：颜色值，如何指定某种颜色可翻阅之前的学习笔记HTML基础（四） 元素类型、颜色、框架
  2.stroke-linecap：控制线条末端的图形，你可以选择对接(butt)、方形(square)和圆形(round)
  3.stroke-width：顾名思义，描边的宽度，单位可为 px 或者 % ，若没有指明则默认为p

若觉得当然stroke不止这一点特性，还有linejoin等，详细可参考SVG基础——填充和描边

运行结果如下

---

4.折线<polyline>

<svg width="2000" height="500">
    <polyline style="stroke-linejoin:miter; stroke:black; 
        stroke-width:12; fill: none;"
        points="100 100, 150 150, 200 100" />
</svg>

• stroke-linejoin控制的是两条线段之间的衔接。你可以在绘制折线时使用它。它有三个值，尖角(miter)、圆角(round)和斜角(bevel)
• points：多个点的坐标，第一位为x，第二位为y，不同坐标点之间用逗号（，）隔开
• 将会从左到右逐个将点连接起来

运行结果如下

---

5.椭圆<ellipse>

<svg width="500" height="250">
   <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
</svg>

• 与圆很像，但是椭圆有rx（x轴半径），ry（y轴）半径连个半径

运行结果如下

---

6.多边形<polygon>

<svg width="1000" height="1000">
    <polygon points="100 100, 200 200,150 100,300 0"
             style="fill: red; stroke:black;" />
</svg>

• 将会从左到右逐个将点连接起来
• 最后一个点会连接第一个点

运行结果如下