笔记-SVG

概念

SVG意为可缩放矢量图形。SVG使用XML格式定义图像。

特点

• SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失。
• SVG是万维网联盟的标准。
• SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强。
• SVG图像可在任何的分辨率下被高质量地打印。
• SVG可在图像质量不下降的情况下被放大。
• SVG图像中的文本是可选的，同时也是可搜索的（适合做地图）
• SVG文件是纯粹的XML。

SVG代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>。这是根元素。width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。SVG代码以<circle>用来创建一个圆。cx和cy属性定义圆中心的x和y坐标。如果忽略这两个属性，那么圆点会被设置为（0，0）。r属性定义圆的半径。stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为2px宽，黑边框。fill属性设置形状内的颜色。我们把填充颜色设置为红色。

在HTML中

SVG可以通过下面标签嵌入HTML文档中：

<embed>、<object> 或者 <iframe>。

• <embed标签：
  优势：所有主要浏览器都支持，并允许使用脚本。
  缺点：不推荐在HTML4和XHTML中使用（但在HTML5中允许）
  语法：

<embed src="circle1.svg" type="image/svg+xml" />

• <object>标签：
  优势：所有主要浏览器都支持，并支持HTML4、XHTML和HTML5标准
  缺点：不允许使用脚本。
  语法：

<object data="circle1.svg" type="image/svg+xml"></object>

• <iframe>标签：
  优势：所有主要浏览器都支持，并允许使用脚本
  缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）
  语法：

<iframe src="circle1.svg"></iframe>

SVG的代码可以直接嵌入到HTML页面中，或者可以直接链接到SVG文件

• 在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

• 链接到SVG文件

<a href="circle1.svg">View SVG file</a>

SVG Stroke属性

• stroke属性
  stroke属性定义一条线，文本或元素轮廓颜色。

• stroke-width属性
  定义了一条线，文本或元素轮廓厚度。

• stroke-linecap属性
  strokelinecap属性定义不同类型的开放路径的终结。

• stroke-dasharray 属性
  stroke-dasharray属性用于创建虚线。

stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距 　如：stroke-dasharray = ‘10’ 表示：虚线长10，间距10，然后重复 虚线长10，间距10

两个参数或者多个参数时： 一个表示长度，一个表示间距 　如：stroke-dasharray = '10, 5’表示：虚线长10，间距5，然后重复 虚线长10，间距
如：stroke-dasharray = '20, 10, 5’表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环

• stroke-dashoffset属性
  stroke-dashoffset属于相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x值的时候，相当于往右移动了x个长度单位。
  不管偏移的方向是哪边，dasharray是循环的，也就是虚线-间隔-虚线-间隔。

SVG里的viewbox

用法：

坐标图：

举例：

<svg viewbox="25 25 50 50"></svg>

以25，25为左边，取宽高50的部分截取。

SVG实现loading

codepen看效果