用 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. Farseer.net轻量级开源框架 入门篇：删除数据详解

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 修改数据详解 下一篇:Farseer.net轻量级开源框架 入门篇: 查询数据详解 ...

  2. Tcl之Read files for synthesis

    The following file is to read all design files into syntehsis tool automatically, like Cadence RTL C ...

  3. vue项目国际化实现 vue-i18n使用详细教程

    1.安装vue-i18n: npm i vue-i18n -S 当然你也可以这样: <script src="https://unpkg.com/vue/dist/vue.js&quo ...

  4. Java编辑编译及运行环境

    Java编辑编译及运行环境 Microsoft Windows 编辑工具 EditPlus JDK JDK(Java Development Kit,Java开发工具包)安装JDK之后,其中bin文件 ...

  5. Leetcode747至少是其他数字两倍的最大数

    Leetcode747至少是其他数字两倍的最大数 在一个给定的数组nums中,总是存在一个最大元素 .查找数组中的最大元素是否至少是数组中每个其他数字的两倍.如果是,则返回最大元素的索引,否则返回-1 ...

  6. bzoj2693 jzptab 莫比乌斯反演|题解

    Description   Input 一个正整数T表示数据组数 接下来T行 每行两个正整数 表示N.M Output T行 每行一个整数 表示第i组数据的结果 Sample Input 1 4 5 ...

  7. iOS中NSAttributedString的使用--对关键字着色，以及处理html实例

    1,最近项目中用到了一个功能,一个很好的功能.就是用户在搜索的时候,搜索结果出来后对你输入的关键字进行红色标记.这样用户就很请楚的看到自己输入什么后会出现什么样子的结果.还有一个功能是,现在有一段文字 ...

  8. css--小白入门篇2

    一.css基础选择器 html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. 1 <style type ...

  9. c++运行程序闪退

        以最简单程序为例       法一:在主函数末尾下一行getchar();即可.需要注意的是这种方法并不适合所有程序,       法二:<1>先在程序开头加上头文件#includ ...

  10. 【IDEA】【Git】pull代码始终无法pull到最新的代码或者提示pull no items 【解决方式】

    最近pull代码老是提示pull no items,但是本地并不是最新的代码,看了各种博客始终无法解决,最后靠自己的方式解决.下面是解决方法. 方法:1.首先git --> repository ...