<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<title>svg path 绘制各种</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>.line{stroke:#900;fill:none;stroke-2px}</style>
<meta name="generator" content="Hexo 4.2.0" />
</head>
<body class="vsc-initialized">
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" markerunits="strokeWidth" markerwidth="12" markerheight="12" viewbox="0 0 12 12" refx="6" refy="6" orient="auto">
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000"></path>
</marker>
<lineargradient id="line-gradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#990000" stop-opacity="0"></stop>
<stop offset="1" stop-color="#990000" stop-opacity="1"></stop>
</lineargradient>
</defs>
<path class="line" d="M30 30 L200 30"></path>
<path class="line" d="M30 60 L200 60" style="stroke-dasharray:5"></path>
<path class="line" d="M30 90 Q115 139 200 90"></path>
<path class="line" d="M30 120 Q115 169 200 120" style="stroke:url(#line-gradient)"></path>
<path class="line" d="M30 150 Q115 199 200 150" style="marker-end:url(#arrow)"></path>
<path class="line" d="M30 180 Q115 229 200 180" style="shape-rendering:optimizeSpeed"></path>
</svg>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style>
.water {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear 1;
}
.no-water {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
.first-run {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear 1;
}
.runing {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: run 10s linear infinite;
}
.runwater {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: run 10s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes run {
from {
stroke-dasharray: 10, 5;
}
to {
stroke-dasharray: 40, 5;
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800" >
<polyline class="pipeline" points="10,10 10,200 200,200 200,400 400,400 400,600" style="fill:white;stroke:gray;stroke-2"
/>
<polyline class="water" id="water" points="10,10 10,200 200,200" style="fill:white;stroke:blue;stroke-2" />
<polyline class="no-water" id="water2" points="200,200 200,400 400,400 400,600" style="fill:white;stroke:blue;stroke-2"
/>
<rect id="key" width="20" height="20" x=190 y=190 style="fill:gray;stroke-1;stroke:rgb(0,0,0)" />
<text style="fill:black;" x=220 y=190 font-size="20" font-family="YouYuan" x="100" y="100" width="200" height="30">点击阀门
</text>
</svg>
<script type="text/javascript">
var keybtn=document.querySelector('#key');
var water1 = document.querySelector('#water');
var water2 = document.querySelector('#water2');
water2.addEventListener("webkitAnimationEnd", function(evt){ //动画结束时事件
this.className.baseVal="runing";
water1.className.baseVal="runing";
}, false);
water1.addEventListener("webkitAnimationEnd", function(evt){ //动画结束时事件
this.style.strokeDashoffset=0;
}, false);
keybtn.addEventListener("click", function(){
water2.className.baseVal="first-run";
}, false);
</script>
</body>
</html>