上個項目用到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 閉合線
注釋：以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。
