<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. manjaro找不到默认键盘布局

    1 问题描述 manjaro安装fcitx后,没有默认的键盘布局,不是这样: 而是: 2 解决方案 解决方案在启动fcitx时就已经有提示了: 缺少了libjson-c这个库,直接使用pacman搜索 ...

  2. Spring(11) - Introductions进行类扩展方法

    Introductions(引用),在 Aspect 中称为类型间的声明,使切面能够声明被通知的对象(拦截的对象)实现给定的接口,并提供该接口的实现. 简单点说可以将一个类的实现方法复制到未实现的类中 ...

  3. Day11_58_增强for循环

    增强for循环 * 语法 : for(数据类型 变量名:数组名/集合名) * 集合如果要使用增强for循环需要先使用泛型来确定元素类型,如果没有使用泛型就使用foreach,那么变量类型设置为Obje ...

  4. istio1.2.2 安装及使用示例

    前言 本文介绍istio的安装及使用 dashboard,grafana,prometheus,kiali,jaeger的配置示例．演示通过istio的ingressgateway统一访问入口 Ist ...

  5. Python容器相关操作

    (集合与字典除外)的容器相关操作 (1)容器的拼接 >>> 'abc' + 'def' 'abcdef' (2)容器的重复 >>> (1, 2) * 3 (1, 2 ...

  6. WordPress伪静态规则设置

    伪静态:即网站本身是动态网页如.php..asp..aspx等格式,而这类网页还带"?"加参数来读取数据库.开启伪静态后,动态网页即被转换重写成静态网页类型页面. WordPres ...

  7. git 配置ssh

    git 配置ssh 生成一个个人账号/邮箱的sshkey ssh-keygen -t rsa -C "youremail@yourcompany.com" -f ~/.ssh/XX ...

  8. Bootstrap自适应各种设备

    <!DOCTYPE html><html><head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title> ...

  9. hdu1255 扫描线，矩形重叠面积（两次以上）

    题意:       给你n个矩形,然后问你这n个矩形所组成的画面中被覆盖至少两次的面积有多大. 思路:       和1542差距并不是很大,大体上还是离散化+线段树扫面线,不同的地方就是这个题目要求 ...

  10. java8中的Optional

    Optional类主要解决空指针异常NullPointerException.Optional 类(java.util.Optional)是一个容器类,代表一个值存在或不存在,原来用 null 表示一 ...