用 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. Git——github基本操作

    基本概念 上一篇文章写到git共享仓库,但是有个局限性,就是这个仓库存在于本地,其他人无法从我们这个仓库拿到共享的内容 但是我们可以将这个共享仓库放入一个远程的服务器上,然后设置一些登录权限就能完美的 ...

  2. Jenkins系列之Jenkins的安装（一）

    自动化测试的时候通常我们都会进行持续集成,下面是持续集成工具Jenkins的安装 Jenkins优点: 开源免费 跨平台,支持所有的平台 web形式的可视化的管理页面 安装配置超级简单 tips及时快 ...

  3. ThinkPHP---案例1登录登出和添加部门

    配置文件分3类:系统配置文件,分组配置文件,应用配置文件 ①系统配置文件ThinkPHP/Conf/convention.php: ②分组 / 模块 /平台配置文件Home/Conf/config.p ...

  4. 02C语言基本语法

    C语言基本语法 注释 //行注释 /* 块注释*/ 标识符 标识符是用来标识变量.函数.任何其他用户自定义项目的名称:一个标识符以字母 A-Z 或 a-z 或下划线 _ 开始,后跟零个或多个字母.下划 ...

  5. 【转载】Spring注解@Resource和@Autowired区别对比

    @Resource和@Autowired都是做bean的注入时使用,其实@Resource并不是Spring的注解,它的包是javax.annotation.Resource,需要导入,但是Sprin ...

  6. 巧用TWaver 3D 矢量图形功能

    的确,提起TWaver,大家想到的首先是“电信拓扑图组件”.其实,由于其灵活的MVC架构.矢量化设计.方便定制等特点,TWaver可以做的还有很多.例如房地产行业常见到的“户型图”. 户型推荐是销售接 ...

  7. 作业 3-5 switch语句的应用

    /*输入五级制成绩(A-E),输出相应的百分制成绩(0-100)区间*/ #include<stdio.h> int main(void) { char ch;/*定义一个字符*/ pri ...

  8. Linux 应用总结：自动删除n天前的日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  9. codeforces 689 Mike and Shortcuts(最短路)

    codeforces 689 Mike and Shortcuts(最短路) 原题 任意两点的距离是序号差,那么相邻点之间建边即可,同时加上题目提供的边 跑一遍dijkstra可得1点到每个点的最短路 ...

  10. PLSQL 下载地址 Spring jar包

    PLSQL   https://www.allroundautomations.com/ instantclient   http://www.oracle.com/technetwork/topic ...