赵工的个人空间

SVG是一种可缩放矢量图形技术（Scalable Vector Graphics），使用XML来描述二维图形的语言。W3C推荐的SVG规范有SVG1.1、SVG Tiny 1.2、SVG Mobile 1.1，电脑Web浏览器支持的是SVG1.1。
SVG是使用XML语言记录的，因此可以使用文本编辑器进行编辑，但是当绘制复制图像或图形时文件会很大，此时使用gzip工具进行压缩，文件后缀变为.gz。
SVG图形格式，已经有多个图像处理软件支持读写，如Adobe公司的Illustrator、Microsoft公司的Office Visio，免费软件Inkscape也支持。

一、SVG的使用及导入导出：

svg可以作为外部文件加载使用，也可以内嵌入网页中显示。

1.SVG在浏览器显示的方法：

HTML5中，可以直接将SVG嵌入：
<object data="map.svg" type="image/svg+xml"></object>
<iframe src="map.svg" width="300" height="300"></iframe>
<img src="map.svg" width="300" height="300"/>

2.SVG描述格式：

SVG文档属于XML类型文档，主要由XML声明、文档类型声明和根元素构成。示例：
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD /scg11.dtd">
<svg width="50" height="50" xmlns="www.w3.org/2000/svg"></svg>

3.HTML中内嵌SVG：

嵌入HTML的div标记内的svg代码常用的格式示例：
<svg width="450px" height="100px" x="0px" y="0px" viewBox="0 0 450 110">
<rect x="10" y="5" width="90" height="90" fill="white" stroke="black" />
<circle cx="170" cy="50" r="45" fill="white" stroke="black" />
<line fill="none" stroke="black" x1="410" y1="95" x2="440" y2="6"/>
<line fill="none" stroke="black" x1="360" y1="6" x2="360" y2="95"/>
</svg>
其中的width和height定义svg图形占用的宽高，如果忽略，默认使用父元素宽高，也可以使用css方式来定义。行内使用，也省去了xmlns="www.w3.org/2000/svg"。
1）viewBox属性：
viewBox是svg的可见区域，有4个参数，按顺序为x、y、width、height，其中没有单位。viewBox是一个可以任意延伸的空间，而不是基于像素，因此可以适应不同尺寸。
2）preserveAspectRatio属性：
当svg的viewBox与viewPort宽高比不同时，可以使用此属性指定显示图形的方式。示例：
preserveAspectRatio="xMidYMid meet"
上述设置是preserveAspectRatio属性的默认值，表示viewBox以均匀的比例适应svg容器。属性值分为两部分，前一部分指定对齐方式，一般包括x对齐方式和y对齐方式两部分，也可以使用none，使图形缩放以适应viewport大小，而不顾及宽高比。其他可选值：
·xMin：viewBox的最小X值对齐viewport的左边部
·xMid：viewBox的X轴中点对齐viewport的X轴中点
·xMax：viewBox的最大X值对齐viewport的右边部
·YMin：viewBox的最小Y值对齐viewport的顶边
·YMid：viewBox的Y轴中点对齐viewport的Y轴中点
·YMax：viewBox的最大Y值对齐viewport的底边
一般是将x对齐方式和y对齐方式组合在一起成为一个参数。
preserveAspectRatio属性值第二项只有slice、meet两个可选值，也可以使用none。
·meet：保持宽高比并将viewBox缩放为适合viewport的大小
·slice：保持宽高比并将所有不在viewport中的viewBox剪裁掉
·none：不保存宽高比。缩放图像适合整个viewbox，可能会发生图像变形

4.SVG的导出：

可以手写svg，也可以使用js库来绘制，也有一些矢量图形处理软件，如Adobe Illustrator、Sketch、Inkscape等，可以导出为svg格式。不过，其中可能包含更多信息，有些可以丢弃。
导出的svg中的数据会带有许多浮点小数，可以通过四舍五入减少小数位数或直接取整。
为了减少导出文件的大小，可以使用一些优化工具，如SVGOMG、SVG Editor、SVGO等。

二、SVG图形的绘制：

1.绘制SVG基本图形：
SVG中提供了很多基本形状，用户可以对这些元素进行直接使用。
1）绘制矩形：
<rect x="50" y="50" width="280" height="280" ry="40" fill="white" stroke="black"/>
其中，x、y用于设定矩形左上角的坐标，width和height分别定义宽和高，ry定义矩形圆角半径，fill定义填充颜色，stroke定义线条颜色，也可以使用style定义css形式的颜色。
2）绘制圆形：
<circle cx="400" cy="400" r="200" style="fill:#39C;" />
其中，cx、cy定义圆心坐标，省略时为（0,0）；r定义半径。
3）绘制椭圆：
<ellipse cx="400" cy="230" rx="200" ry="100" style="fill:#F39;" />
其中，rx定义椭圆长轴半径，ry定义短轴半径。
4）绘制直线：
<line x1="400" y1="230" x2="200" y2="100" style="stroke:#F39;" />
5）绘制折线：
polyline和polygon都可以绘制折线，区别在于是否将开始点与结束点进行连接闭合。
<polygon fill="white" stroke="black" points="279,5 294,35,328,40,303,62 309,94 279,79 248,94 254,62 230,39 263,35" />
上述代码会画出一个五角星。

2.绘制路径:
使用path元素也可以绘制各种图形。
<path d="M459,47 L589,445 L249,198 L669,198 L330,445 z" stroke-width="3px" fill="#F39">
path通过将命令与坐标进行组合来绘制图形，“命令+参数1+参数2”作为一个集合，参数之间可以用空格或逗号分隔。path的命令有移动位置M、描绘曲线C、描绘直线L、描绘圆弧A和封闭路径Z等，其中命令为大写时坐标为绝对坐标，命令为小写时坐标为相对坐标。

3.编组：
可以使用g元素将多个元素组织在一起。g元素编组的元素可以设置相同颜色，也可以进行坐标变换。
<g fill="#F39">
  <元素1><元素2><元素3><元素4><元素5>
</g>
其中的各元素可以是矩形、圆形、折线等。
可以使用transform属性对g元素中绘制的图形的位置、形状、角度等属性进行整体设置。transform属性包含的属性值有：

其中matrix属性值可以直接对移动、缩放和旋转同时进行控制，包含6个参数，分别为x轴的伸缩、y轴的伸缩、x轴的倾斜、y轴的倾斜、x轴的移动、y轴的移动。
transform是从右侧开始执行。示例：
<g fill="#F39" transform="translate(120,-100) rotate(45,100,200)">
  <元素1><元素2><元素3><元素4><元素5>
</g>
属性改变顺序可能效果会不同，因此参考点发生了变化。

4. 绘制文本：
1）简单绘制文本：
text可以简单地设置字符串，让其在页面中显示，但字符串不能换行。
<text x="20" y="40">朝辞白帝
   <tspan x="80" y="80">彩云间</tspan>
</text>
2）制作沿特定路线的文本：
<defs>
  <path id="circlepath" d="M260,200 C260,200 300,150 350,200 C350,200 400,250 440,200 M360,300 C360,300 400,250 450,300 C450,300 500,350 540,300" />
</defs>
<g fill="#F39" font-size="25" font-family="宋体">
  <text x="20" y="40">
<textpath xlink:href="#circlepath">朝辞白帝彩云间，千里江陵一日还。</textpath>
  </text>
</g>
<use xlink:href="#circlepath" fill="none" stroke="#0FF" />

5.渐变：
通过linearGradient和radialGradient可以定义渐变绘图方法。
1）线性渐变：
<defs id="colorGradient">
  <linearGradient>
    <stop offset="0%" stop-color="#F0F" />
    <stop offset="1000%" stop-color="#00F" />
  </linearGradient>
</defs>
<rect x="190" y="100" width="200" height="300" ry="20" fill="url(#colorGradient)" />
<rect x="520" y="100" width="200" height="300" ry="20" fill="url(#colorGradient)" />
2）径向渐变：
径向渐变是由内向外进行圆形效果的渐变。
<defs id="colorGradient">
  <linearGradient>
    <stop offset="0%" stop-color="#000" stop-opacity="1" />
    <stop offset="1000%" stop-color="#FFF" stop-opacity="0.2" />
  </linearGradient>
</defs>
<rect x="250" y="70" width="400" height="400" ry="20" fill="url(#colorGradient)" />

6.样式单：
SVG与HTML一样，可以通过样式单来修饰外观，样式单可以放在defs元素内。
<defs>
  <style type="text/css">
.sample {
   stroke:blue;
   fill:#0080FF;
   opacity:1;
}
.sample1 {
   stroke-width:5;
}
 .sample2 {
   stroke:none;
   fill:#00FF00;
}
 </style>
 <rect x="250" y="40" width="200" height="200" id="sample" />
</defs>
<use xlink:href="#sample1" class="sample sample1" />
<use xlink:href="#sample2" class="sample sample2" />
可以使用CSS选择器和语法来修改SVG绘图的外观，既可以指定内嵌CSS样式，也可以作为外部样式表来引用。HTML中内嵌svg时，defs标记一般并不会有浏览器的支持，需要改为CSS样式来表示。

三、使用CSS3制作SVG动画：

CSS3添加了制作动画的animation和keyframe关键帧等相关样式属性。

1. 基本的CSS3动画格式：
创建CSS3动画，需要定义关键帧keyframe：
@keyframes animation-name-you-pick{
    0%{
        background:blue;
        transform:translateX(0);
    }
    50%{
        background:purple;
        transform:translateX(50px);
    }
    100%{
        background:red;
        transform:translateX(100px);
    }
}
也可以使用from和to来替代百分比，如果没有定义初始帧和结束帧，在一些浏览器中可能有问题。
然后对动画进行配置。示例：
.ball{
    animation-name: animation-name-you-pick;
    animation-duration: 2s;
    animation-delay: 2s;
    animation-iteration-count: 3;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
也可以使用一个简短版：
.ball{
    animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}
animation的属性是以空格分隔，数字值之外的属性声明顺序可以互换，而数字值属性需要按duration、delay、iteration count顺序，分别表示总时间、延时、执行次数。
使用上述动画帧的div结构为：
.ball{
    border-radius:50%;
    width:50px;
    height:50px;
    margin:20px;
    background:black;
}

2.使用SVG做动画：
使用svg画一个小球。
<svg width="600px" height="70px" viewBox"0 0 600 70">
<circle class="ball" cx="45" cy="45" r="25"/>
</svg>
代码中定义了一个条状viewBox供小球移动，然后画了一个25px的小球，并给出类定义ball，不过其fill属性不能写在其中，而要写在对应的类的样式属性中：
.ball{
    border-radius:50%;
    width:50px;
    height:50px;
    margin:20px;
    background:black;
animation: animation-name-you-pick 2s 2s 3 alternate ease-in-out forwards;
}
@keyframes animation-name-you-pick{
    0%{
        fill:blue;
        transform:translateX(0);
    }
    50%{
        fill:purple;
        transform:translateX(50px);
    }
    100%{
        fill:red;
        transform:translateX(100px);
    }
}
代码的效果与前面使用CSS3的动画基本一致。使用svg配合CSS3实现动画，因为svg可用来绘制比较复杂的图形，再加上CSS3比较简单的动画定义，可以实现更复杂的图形动画，而且很多情况下比直接使用JavaScript代码实现动画简单。