<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-width: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-width:2"

        />

        <polyline class="water" id="water" points="10,10 10,200 200,200" style="fill:white;stroke:blue;stroke-width:2" />

        <polyline class="no-water" id="water2" points="200,200 200,400 400,400 400,600" style="fill:white;stroke:blue;stroke-width:2"

        />

        <rect id="key" width="20" height="20" x=190 y=190 style="fill:gray;stroke-width: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>

svg 飞线，源码的更多相关文章

  1. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  2. arcgis api 4.x for js 自定义 Draw 绘制手绘面以及手绘线，只针对二维视图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

  3. iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码

    iOS精选源码 动画知识运用及常见动画效果收集 3D卡片拖拽卡片叠加卡片 iFIERO - FLYING PENGUIN 飞吧企鹅SpriteKit游戏(源码) Swift封装的空数据提醒界面Empt ...

  4. 【源码】HashMap源码及线程非安全分析

    最近工作不是太忙,准备再读读一些源码,想来想去,还是先从JDK的源码读起吧,毕竟很久不去读了,很多东西都生疏了.当然,还是先从炙手可热的HashMap,每次读都会有一些收获.当然,JDK8对HashM ...

  5. 线程之Callable、Future 和FutureTask使用及源码分析

    一.Callable 我们知道启动线程有以下两种方式(jdk源码注释中官方定义只有两种启动方式,callable不算线程启动方式) 原文链接:http://www.studyshare.cn/blog ...

  6. 火热的线上APP的源码分享，开箱即用

    这篇文章是写给iOS的程序员或产品经理的,同样,对于入门学习iOS开发的人,也是一个很好的实战演练,因为这里分享的是一个已经上架的.拿了源码就能正常运行起来的项目. 在介绍这个项目的源码分享之前,小编 ...

  7. 反编译获取线上任何微信小程序源码（转）

    看到人家上线的小程序的效果,纯靠推测,部分效果在绞尽脑汁后能做出大致的实现,但是有些细节,费劲全力都没能做出来.很想一窥源码?查看究竟?看看大厂的前端大神们是如何规避了小程序的各种奇葩的坑?那么赶紧来 ...

  8. 微信小程序 - 反编译线上源码

    github地址:https://github.com/qwerty472123/wxappUnpacker 不过我好像从来未成功过哈,TX地图+.TX公交都失败了 点击下载以上两个文件 哦,对了,你 ...

  9. 由一次线上故障来理解下 TCP 三握、四挥 & Java 堆栈分析到源码的探秘

    本文导读: 生产故障场景介绍 TCP 建连三次握手过程 TCP 断连四次挥手过程 结合 Java 堆栈剖析源码 再从堆栈中找到"罪魁祸首" 问题优化方案总结 1.生产故障场景介绍 ...

随机推荐

  1. JDK8接口新关键字default和static

    JDK8及以后,允许我们在接口中定义static方法和default方法. public interface InterfaceDemo { // static修饰符定义静态方法 static voi ...

  2. 1075 PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  3. 7- MySQL结果数据处理与函数

    复习: 查询:select 列名 from 表 去重:distinct 排序:order by 列1 列2 排序方法:asc desc. 限定返回行数:limit n limit n,m 过滤:whe ...

  4. vue.js中$emit的理解

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. HTML / CSS技巧 – 可滚动的 tbody（漂亮表格）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. hdu2833 Floyd + dp

    题意:      给你一个无向图,给你两组起点和终点,问你这两组起点和终点的最短路上最多有多少个交点... 思路:      开一个数组dp[i][j]记录最短路上i,j之间的点有多少个,这个数组是根 ...

  7. hdu3182 状态压缩dp

    题意:       一个人做汉堡包,每个汉堡包有自己的花费和价值,某些汉堡包必须是在其他的某些汉堡包已经做好了的前提下才能制作,给你这个人的初始钱数,问最大的价值是多少. 思路:       比较简单 ...

  8. Linux-鸟菜-0-计算机概论

    Linux-鸟菜-0-计算机概论 这一章在说计算机概论,额....,总的来说看完之后还是有点收获,回忆了下计算机基本知识.没有什么可上手操作的东西,全是概念,直接把最后的总结给截图过来吧,因为概念的话 ...

  9. Andrew Ng机器学习算法入门(二):机器学习分类

    机器学习的定义 Arthur Samuel给出的定义,Field of Study that gives computers the ability to learn without being ex ...

  10. CentOS运行多个Tomcat操作步骤

    一:修改环境变量 在/et/profile文件追加以下内容 # tomcat1 env ( 第一个tomcat 的环境变量) export CATALINA_HOME=/usr/local/apach ...