svg 飞线,源码

<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>
原文地址:https://www.cnblogs.com/scale/p/14268051.html