用 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. jstree -- 使用JSON 数据组装成树

    概述: 前面主要是html数据,这里主要是json数组 1.格式 jsTree需要一个具体格式JSON数据,在标准的语法没有那个字段是必须的-而是那些是你需要的.请记住你可以获取任何你请求的其他属性, ...

  2. 第五届蓝桥杯校内选拔第六题_(dfs)

    你一定听说过“数独”游戏.如[图1.png],玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一行.每一列.每一个同色九宫内的数字均含1-9,不重复. 数独的答案都是唯一的,所以 ...

  3. windows服务器修改远程登录的端口+防火墙配置

    话不多说,一个bat文件,快速修改注册表端口.你只需要做的是另外防火墙添加例外端口后重启即可.经测试2008-2012-2016-2019正常使用! @echo off rem 查找端口号 for / ...

  4. LA 3029 City Game

    LA 3029 求最大子矩阵问题,主要考虑枚举方法,直接枚举肯定是不行的,因为一个大矩阵的子矩阵个数是指数级的,因此应该考虑先进行枚举前的扫描工作. 使用left,right,up数组分别记录从i,j ...

  5. JUnit基本用法

    JUnit的一些注意事项: 测试方法必须使用@Test修饰 测试方法必须使用public void进行修饰,不能带参数 一般使用单元测试会新建一个test目录存放测试代码,在生产部署的时候只需要将te ...

  6. 10.3andXE7的DEVExpress18.2.1记录备查

    记录备查: win10 DEVExpress18.2.1用DevExpressVCL一键编译安装工具_v10.3.2 - 2018-12-12.exe(包括help,备份...升级系统不用重新安装控件 ...

  7. 【18】AngularJS 包含

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服 ...

  8. JavaSE 学习笔记之包装类（十七）

    基本数据类型对象包装类:是按照面向对象思想将基本数据类型封装成了对象. 好处: 1:可以通过对象中的属性和行为操作基本数据. 2:可以实现基本数据类型和字符串之间的转换. 关键字   对应的类名 by ...

  9. RabbitMQ整合spring----https://www.cnblogs.com/woms/p/7040902.html

    https://www.cnblogs.com/woms/p/7040902.html

  10. BNUOJ 1260 Brackets Sequence

    Brackets Sequence Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Origi ...