用 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. nodejs——避免判断创建多级目录

    基本概念 fs.exists已经弃用,可以使用fs.access判断文件夹是否存在,但是官方的建议是在进行文件操作前不要使用fs.access,官方推荐的方式的是直接进行文件操作,有错误再修改 不建议 ...

  2. WinRT ListView间隔变色(二)

    上文说到,WinRt中,我们不能在Style的Setter使用Binding.这个问题其实从SL5之前,一直都不可以.但是,为了使用强大的Binding,人们也一直想使用各种方法来达到Binding ...

  3. 从输入URL到网页呈现的过程

    1.域名解析当我们在浏览器中输入一个URL,例如”www.google.com”时,这个地址并不是谷歌网站真正意义上的地址.互联网上每一台计算机的唯一标识是它的IP地址,因此我们输入的网址首先需要先解 ...

  4. Vue.js 是什么

    Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层. 单页应用:Vue ...

  5. Oracle XE WM_CONCAT undifine

    用docker 跑了个oracle XE 报错 没有WM_CONCAT    下载三个sql文件然后按顺序执行后可以正常使用 一:下载三个文件 解压到 oracle 目录下面 (要能找到,注意权限要o ...

  6. spark学习（3）---集合

    一.list https://blog.csdn.net/xianpanjia4616/article/details/84930779 华为文档:https://support.huawei.com ...

  7. 网络编程 - socket实现多个连接处理

    #服务端import socket,osso_server=socket.socket()so_server.bind(("localhost",6969))so_server.l ...

  8. Android studio升级后原有项目无法正常编译运行问题

    Android studio工具升级后Gradle版本问题 背景 升级AndroidStudio到最新版本后,原来可正常编译输出AndroidTest的项目无法正常编译通过. 原因 升级后的Andro ...

  9. Djang学习笔记-1

    1.django的生命周期: url匹配 -> 视图函数 -> 返回用户字符串 url匹配 -> 视图函数 -> 打开一个HTML文件,并读取内容2.创建Django proj ...

  10. HDU 5115 (2014ACM/ICPC亚洲区北京站) D题(Dire Wolf)

    题目传送门 设dp[i][j]为杀掉区间i到j之间的狼需要付出的最小代价,那么dp[i][j]=min{dp[i][k-1]+dp[k+1][j]+a[k]+b[i-1]+b[j+1]} Java代码 ...