用 svg 元素画出一条直线很简单，用 line 等元素都可以，可是画虚线的话，就需要一个属性：

stroke-dasharray: 1 2;  画1px 空2px

（长这个样子）

stroke-dasharray: 1 2 3；画 1px 空2px 画3px 空1px

（长这个样子，额，请倒过来看）

stroke-dasharray: 1 2 3 4; 画 1px 空2px 画3px 空4px

（长这个样子，额，请倒过来看）

svg 虚线的更多相关文章

  1. 数据可视化系列--svg入门基础（一）

    一.前言 1.SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形: (2)用来定义web上的使用的矢量图: (3)改变图像尺寸,图片质量不 ...

  2. 前端流程图jsplumb学习笔记

    1.这篇博客很好,另外两个是官网文档 http://www.cnblogs.com/leomYili/p/6346526.html https://jsplumbtoolkit.com/communi ...

  3. 在svg里面画虚线

    使用stroke-dasharray="3 2"  属性,其中3和2分别表示画的长度和间隙的长度 比如 <line x1="0" y1="5&q ...

  4. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  5. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  6. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  7. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  8. SVG实现导航动画

    效果图动画后 html <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> ...

  9. 学习SVG系列（3）：SVG Stroke属性

    SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...

随机推荐

  1. 跨站脚本攻击XXS(Cross Site Scripting)修复方案

    今天突然发现,网站被主页莫名奇妙的出现了陌生的广告. 通过排查发现是跨站脚本攻击XXS(Cross Site Scripting).以下为解决方案. 漏洞类型: Cross Site Scriptin ...

  2. 最优化方法系列：Adam+SGD—>AMSGrad

    自动调参的Adam方法已经非常给力了,不过这主要流行于工程界,在大多数科学实验室中,模型调参依然使用了传统的SGD方法,在SGD基础上增加各类学习率的主动控制,以达到对复杂模型的精细调参,以达到刷出最 ...

  3. 安卓app测试之Monkeyrunner

    一.MonkeyRunner简介 MonkeyRunner提供了系列的API ,MonkeyRunner可以完成模拟事件及截图操作 ,分为以下三类: MonkeyRunner:用来连接设备或模拟器的 ...

  4. Java基本数据类型、包装类与String类之间的转换

    一.基本数据类型与包装类之间的转换: import org.junit.Test; public class MainTest { /** * 基本数据类型与包装类之间的转换 */ @Test pub ...

  5. Gym - 101670C Chessboard Dancing（CTU Open Contest 2017 找规律）

    题目:链接 思路: 多画出几个情况就可以找出规律来了 Knight (当大于2的时候只要两种颜色相间出现就可以了) King(当大于等于3的时候,总可以用四种形式来补色,具体如下)  Bishop(斜 ...

  6. 利用ajax全局设置实现拦截器

    var token = localStorage.getItem("token"); $.ajaxSetup({ dataType: "json", cache ...

  7. [bzoj2141][排队] (分块大法好)

    Description 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我,吃完果果唱支歌,大家乐和和.红星幼儿园的小朋友们排起了长长地队伍,准备吃果果.不过因为小朋友们的 ...

  8. 【05】JSON笔记

    [05]笔记           尽管有许多宣传关于 XML 如何拥有跨平台,跨语言的优势,然而,除非应用于 Web Services,否则,在普通的 Web 应用中,开发者经常为 XML 的解析伤透 ...

  9. 【Codeforces 922D】Robot Vacuum Cleaner

    [链接] 我是链接,点我呀:) [题意] 让你把n个字符串重新排序,然后按顺序连接在一起 使得这个组成的字符串的"sh"子序列最多 [题解] /* * 假设A的情况好于B * 也就 ...

  10. RabbitMQ-linux安装rabbitmq(二)

    说明 本地装了个虚拟机模拟集群 所以记下安装步骤 安装Erlang 安装类库 yum -y install ncurses-devel yum -y install openssl-devel yum ...