<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. 使用gradle插件发布项目到nexus中央仓库

    目录 简介 Gradle Nexus Publish Plugin历史 插件的使用 Groovy DSL Kotlin DSL 插件背后的故事 总结 简介 Sonatype 提供了一个叫做开源软件资源 ...

  2. Mysql无法通过临时密码访问

    在Linux上安装Mysql: [步骤一]:将mysql的安装文件上传到Linux的服务器. [步骤二]:安装MYSQL服务端 [步骤三]:安装MYSQL客户端 我在步骤三遇到了问题,所以直接从步骤三 ...

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

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

  4. Day01_12_Java的类型转换

    Java类型转换 实例 public class 类型转换 { public static void main(String[] args) { int i =128; byte b= (byte) ...

  5. Pytorch系列:（二）数据加载

    DataLoader DataLoader(dataset,batch_size=1,shuffle=False,sampler=None, batch_sampler=None,num_worker ...

  6. 【luogu P3803】【模板】多项式乘法（FFT）

    [模板]多项式乘法(FFT) 题目链接:luogu P3803 题目大意 给你两个多项式,要你求这两个多项式乘起来得到的多项式.(卷积) 思路 系数表示法 就是我们一般来表示一个多项式的方法: \(A ...

  7. 常用head标签

    最小推荐 <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content= ...

  8. C/C++ 导入表与IAT内存修正

    本章教程中,使用的工具是上次制作的PE结构解析器,如果还不会使用请先看前一篇文章中对该工具的介绍,本章节内容主要复习导入表结构的基础知识点,并通过前面编写的一些小案例,实现对内存的转储与导入表的脱壳修 ...

  9. Win64 驱动内核编程-25.X64枚举和隐藏内核模块

    X64枚举和隐藏内核模块 在 WIN64 上枚举内核模块的人方法:使用 ZwQuerySystemInformation 的第 11 号功能和枚举 KLDR_DATA_TABLE_ENTRY 中的 I ...

  10. 【Redis】redis异步消息队列+Spring自定义注解+AOP方式实现系统日志持久化

    说明: SSM项目中的每一个请求都需要进行日志记录操作.一般操作做的思路是:使用springAOP思想,对指定的方法进行拦截.拼装日志信息实体,然后持久化到数据库中.可是仔细想一下会发现:每次的客户端 ...