<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. pandas（1）：Pandas文件读取——read_excel()

    目录 一.函数原型 二.功能说明 三.常用参数说明 四.总结 一.函数原型 pd.read_excel(io, sheet_name=0, header=0, names=None, index_co ...

  2. 在Visual Studio 中使用git——给Visual Studio安装 git插件（二）

    在Visual Studio 中使用git--什么是Git(一) 第二部分: 给Visual Studio安装 git插件 如果要使用 git 进行版本管理,其实使用 git 命令行工具就完全足够了, ...

  3. DDD实践反思

    某大型互联网公司于2019年开始在XX中台财务域进行DDD实践.事后回顾,整体并没有达到预期的效果,个人也做了很多的反思和总结,形成此文. 1. 背景 为什么当时要实践DDD?其中的缘由比较复杂,可以 ...

  4. ASP微信服务号H5客户登陆，且获取客户授权的用户基本信息

    ASP微信服务号H5客户登陆,且获取客户授权的用户基本信息是需要客户授权,下面讲解详细步骤: 第一步:客户点击登录页,自动跳转到微信服务器端获取code 第二步:用第一步获取的code去获取客户的ac ...

  5. 11- jmeter主要元件

    元件分类 HTTP请求默认值(请求行,请求头,空行,消息体) HTTP信息头管理器: HTTPcookie管理器(1.更真实的模拟用户行为 ,多个请求的关联.第一个请求没有cookie第二个就带了co ...

  6. Ribbon、Feign和OpenFeign的区别

    Spring Cloud 微服务架构学习记录与示例 Ribbon Ribbon 是 Netflix开源的基于HTTP和TCP等协议负载均衡组件 Ribbon 可以用来做客户端负载均衡,调用注册中心的服 ...

  7. hdu4535

    题意: 吉哥系列故事--礼尚往来 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) To ...

  8. POJ 2396 构造矩阵（上下流）

    题意:       要求构造一个矩阵,给你行和,列和,还有一些点的上下范围,输出一个满足题意的矩阵. 思路:       这个题目很经典,这是自己看上下流后接触的第一道题,感觉很基础的一道题目,现在我 ...

  9. Python中pip安装报错Unable to create process using '....'

    因为我本人在电脑上安装了python2和python3,所以在安装的时候,把两个python的安装目录都安装到G盘了.然后两个python的执行文件分别改成了 python2.exe 和  pytho ...

  10. 【TensorFlow】Win7下使用Object Detection API 训练自己的数据集，并视频实时检测

    说明: 图片:自己开的摄像头,截取的图片.选择了200张图片.下面会有截取的脚本. 使用labelImg工具进行图片进行标注.产生PascalVOC格式的XML文件.[labelImg工具的安装和使用 ...