上个项目用到svg实现一个水流的动画，鉴于没学习几天，所以懂的也不多，就此分享一下。
首先svg是什么，svg可缩放矢量图形，可缩放矢量图形是基于可拓展标记语言，用于描述二维矢量图形的一个图形格式。svg和其他图像格式相比，使用svg的优势在于：
svg图像可以通过文本编辑器来创建和修改
svg图像可被搜索，索引，脚本化或压缩
svg是可伸缩的
svg图像可在任何的分辨率下被高质量地打印
svg可在图像质量不下降的情况下被放大
svg它可以直接嵌入html，并且可以当做DOM节点去操作，加class类名，定义动画，都是可以的。上一段简单的代码吧
html
<svg id="waterSvg" x="0px" y="0px" viewBox="0 0 1262 980" width="80%" height="1033">
<image xlink:href="img/lhimg/8background.png" id="svg_1" height="838.024047" width="1177.000066" y="90" x="23.5"/>
<rect stroke="#11a3f0" id="svg_8" height="57.999999" width="194.000003" y="78.000001" x="545" stroke-width="1.5" fill="#11a3f0"/>
<rect stroke="#11a3f0" id="svg_11" height="57.999999" width="194.000003" y="558.312043" x="252.687958" stroke-width="1.5" fill="#11a3f0"/>
<rect stroke="#11a3f0" id="svg_14" height="57.999999" width="194.000003" y="558.312043" x="890.738129" stroke-width="1.5" fill="#11a3f0"/>
<rect stroke="#11a3f0" id="svg_2" height="57.999999" width="194.000003" y="800.452348" x="882.738129" stroke-width="1.5" fill="#11a3f0"/>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_9" y="60" x="601" stroke-width="0" stroke="#11a3f0" fill="#000000">Level</text>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_12" y="540.312042" x="308.687958" stroke-width="0" stroke="#11a3f0" fill="#000000">Level</text>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_15" y="540.312042" x="946.738129" stroke-width="0" stroke="#11a3f0" fill="#000000">Level</text>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_3" y="782.452347" x="938.738129" stroke-width="0" stroke="#11a3f0" fill="#000000">Level</text>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_10" y="116" x="595" stroke-width="0" stroke="#11a3f0" fill="#ffffff">32.23m</text>
<text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_13" y="598.312042" x="284.687958" stroke-width="0" stroke="#11a3f0" fill="#ffffff">32.23m3/h</text>
<text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_16" y="598.312042" x="924.738129" stroke-width="0" stroke="#11a3f0" fill="#ffffff">32.23m3/h</text>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="28" id="svg_4" y="838.452347" x="932.738129" stroke-width="0" stroke="#11a3f0" fill="#ffffff">32.23m</text>
<image class="rotetion" xlink:href="img/lhimg/xiaofengshan.png" id="svg_19" height="23.999999" width="23.999999" y="780.5" x="637"/>
<image class="rotetion" xlink:href="img/lhimg/xiaofengshan.png" id="svg_20" height="23.999999" width="23.999999" y="780.5" x="558.493752"/>
<image class="rotetion" xlink:href="img/lhimg/xiaofengshan.png" id="svg_21" height="23.999999" width="23.999999" y="257.986481" x="273.980232"/>
<image class="rotetion" xlink:href="img/lhimg/xiaofengshan.png" id="svg_18" height="23.999999" width="23.999999" y="257.986481" x="352.036461"/>
<line class="warter comm" id="svg_22" y2="174" x2="126.501244" y1="174" x1="26" />
<line class="warter comm" id="svg_23" y2="174.5" x2="183.508331" y1="174.5" x1="168.5" />
<path class="warter comm" id="svg_24" d="m285.5,205c0,0 0,-14.5 0,-14.5c0.5,-17.5 17.5,-16.5 17.5,-16.5c0,0 60.5,0.5 60.5,0.5" />
<line class="warterfan comm" id="svg_25" y2="205.5" x2="364.5" y1="175.5" x1="364.5" />
<line class="warter comm" id="svg_26" y2="174.5" x2="429.501968" y1="174.5" x1="366" />
<path class="warter comm" id="svg_27" d="m487.5,173.5c0,0 131,0.5 131,0.5c20,0 19.5,18 19.5,18c0,0 -0.5,96 -0.5,96" />
<line class="warter comm" id="svg_28" y2="331.5" x2="838.016789" y1="331.5" x1="771" />
<line class="warter comm" id="svg_29" y2="332" x2="881" y1="332" x1="860.5" />
<path class="warter comm" id="svg_30" d="m1042.5,331.5c0,0 130,0 130,0c19.5,1.5 20.5,16 20.5,16c0,0 -0.5,331 -0.5,331c-3.5,18.5 -18.5,17 -18.5,17c0,0 -349,0.5 -349,0.5" />
<path class="warter comm" id="svg_31" d="m649,725c0,0 0,-12.5 0,-12.5c-3,-18.5 -17,-17 -17,-17c0,0 -59.5,0 -59.5,0" />
<line class="warterfan comm" id="svg_32" y2="727" x2="570.5" y1="696" x1="571" />
<line class="warter comm" id="svg_33" y2="695.5" x2="570" y1="695.5" x1="506.5" />
<line class="warterfan comm" id="svg_34" y2="695" x2="462" y1="695" x1="25.5" />
</svg>
</div>
css
.comm {
stroke: #14F2F2;
fill: rgba(255, 255, 255, 0);
stroke-miterlimit: 10;
stroke-dashoffset: 1000;
stroke-opacity: 0.5;
stroke-miterlimit: 10;
}
.warter {
animation: run 5s linear infinite;
opacity: 0.7;
stroke-width: 9;
}
@keyframes run {
from {
stroke-dasharray: 40, 6;
stroke-dashoffset: 1000;
}
to {
stroke-dasharray: 40, 6;
stroke-dashoffset: 0;
}
}
.warterfan{
animation: runfanh 5s linear infinite;
opacity: 0.7;
stroke-width: 9;
}
@keyframes runfanh {
from {
stroke-dasharray: 40, 6;
stroke-dashoffset: 0;
}
to {
stroke-dasharray: 40, 6;
stroke-dashoffset: 1000;
}
}
好吧，或许你会说‘我的天，这么多么，还这么乱，怎么写’，简单的介绍一个它有什么东西，有什么属性
标签
<rect> 矩形
rect元素的width和height属性可定义矩形的高度和宽度
style属性用来定义CSS属性
CSS的fill属性定义矩形的填充颜色（rgb值，颜色名或者十六进制值）
CSS的stroke-width属性定义矩形边框的宽度
CSS的stroke属性定义矩形边框的颜色
X属性定义矩形的左侧位置
Y属性定义矩形的顶端位置
CSS的fill-opacity属性定义填充颜色的透明度
CSS的stroke-opacity属性定义笔触颜色透明度
CSS的opacity属性定义整个元素的透明值
rx和ry属性可使矩形产生圆角
<cirlce> 圆形
cx和cy属性定义原点的X和Y坐标。如果省略CX和CY，圆的中心会被设置为（0,0）
r属性定义圆的半径
<ellipse> 椭圆
cx属性定义圆点的X坐标
cy属性定义圆点的Y坐标
rx属性定义水平半径
ry属性定义垂直半径
<line> 线
x1属性在X轴定义线条的开始
y1属性在Y轴定义线条的开始
x2属性在X轴定义线条的结束
y2属性在Y轴定义线条的结束
<polyline> 折线
points属性定义多边形每个角的X和Y的坐标
<polygon> 多边形
<path> 路径
M = moveto 移至
l = lineto 画连接线
h = horizontal lineto 水平线
v = vertical lineto 垂直线
c = curveto 弧线
s = smooth curveto 光滑的弧线
q = quadratic belzier curve 二次Belzier曲线
t = smooth quadratic Belzier curveto 光滑的 二次Belzier曲线
a = elliptical arc 椭圆的
z = closepath 闭合线
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
网友评论