用 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. 自定义 Java Annotation ,读取注解值

    1. 首先是自定义注解: package cn.veji.hibernate.po; import java.lang.annotation.ElementType; import java.lang ...

  2. Flask框架 之request对象

    一.request对象属性 属性 说明 类型 data 记录请求的数据,并转换为字符串 * form 记录请求中的表单数据 MultiDict args 记录请求中的查询参数 MultiDict co ...

  3. js统计图表插件 Echarts

    Echarts 用于制作数据统计图表,一个纯 Javascript 的图表库,快捷简便的生成统计图表. 官网:https://www.echartsjs.com/ 效果 html <!DOCTY ...

  4. Functional language 函数

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...

  5. （转）Oracle数据库DBA必备基本技能

    [Oracle数据库DBA必备基本技能] shutdown Normal 需要等待所有的用户断开连接 Immediate 等待用户完成当前的语句 Transactional    等待用户完成当前的事 ...

  6. C++ 11常见功能介绍:auto,decltype,nullptr,for,lambda

    什么是C++11 C++11是曾经被叫做C++0x,是对目前C++语言的扩展和修正,C++11不仅包含核心语言的新机能,而且扩展了C++的标准程序库(STL),并入了大部分的C++ Technical ...

  7. Go：变量、常量、枚举

    一.变量 package main import "fmt" func variableZeroValue() { // 变量声明 var a int var b string f ...

  8. 利用 Python 批量修改文件名

    开发的第一步,首先得熟悉脚本中使用的模块函数,废话不多说,开干! 1 函数介绍 1.1 os 模块 (1)os.lisdir() >>> import os >>> ...

  9. 08.C语言：特殊函数

    C语言:特殊函数 1.递归函数: 与普通函数比较,执行过程不同,该函数内部调用它自己,它的执行必须要经过两个阶段:递推阶段,回归阶段: 当不满足回归条件,不再递推: #include <stdi ...

  10. Codeforces Round #395 C. Timofey and a tree

    package codeforces; import java.util.*; public class CodeForces_764C_Timofey_and_a_tree { static fin ...