<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. Kubernetes 学习笔记-- kafka往couchdb里倒东西

    首先吐槽下国内这些论坛的技术精神,不是我崇洋媚外,有些复读机烦不烦啊,别人的东西吃进去吐出来好玩么? 还有一些不懂装懂,这种最可恶,明明自己都不明白自己在写什么,还是往精华区发,简直离谱,知道自己多挣 ...

  2. Python 多线程（一）

    Python多线程(一) 目录 Python多线程(一) 线程 Python线程模型 Python虚拟机按照下面所述方式来切换线程 Threading模块 未引进线程 结果 引入线程 方式一:创建Th ...

  3. Horovod in Docker

    https://horovod.readthedocs.io/en/stable/docker.html Step1 构建镜像 GPU $ mkdir horovod-docker-gpu $ wge ...

  4. Go-08-函数与指针

    Go语言的函数本身可以作为值进行传递,既支持匿名函数和闭包,又能满足接口. 函数声明 func 函数名 (参数列表)(返回参数列表){ // 函数体 } func funcName(parameter ...

  5. JavaCV 视频滤镜（LOGO、滚动字幕、画中画、NxN宫格）

    其实,在JavaCV中除了FFmpegFrameGrabber和FFmpegFrameRecorder之外,还有一个重要的类,那就是FFmpegFrameFilter. FFmpegFrameFilt ...

  6. 如何把 Caffeine Cache 用得如丝般顺滑？

    一.关于 Caffeine Cache 在推荐服务中,虽然允许少量请求因计算超时等原因返回默认列表.但从运营指标来说,越高的"完算率"意味着越完整的算法效果呈现,也意味着越高的商业 ...

  7. spring boot 通过feign调用api接口

    目的:远程调用服务器api,直接上步骤: 1,添加maven依赖,这是必须的: <dependency> <groupId>org.springframework.cloud& ...

  8. C语言基础知识错误总结

    1. 以下选项中能表示合法常量的是( ). Select one: a. '\' b. 1.5E2.0 c. "\007" d. 1,200  Feedback The corre ...

  9. Django--虚拟环境、项目和应用的创建

    第一点:官方手册 -- https://yiyibooks.cn/ 第二点:运行环境 -- django项目采用虚拟运行环境 之前我们pip install都是在Python的安装目录(底层)上安装的 ...

  10. 3- MySQL数据类型

    MySQL表字段类型 MySQL数据表的表示一个二维表,由一个或多个数据列构成. 每个数据列都有它的特定类型,该类型决定了MySQL如何看待该列数据,并且约束列存放相应类型的数据. MySQL中的列表 ...