用 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. 【笔记JS/HTML/CSS】CSS3实现鼠标滑动显示动画（transition、transform）

    内容中包含 base64string 图片造成字符过多,拒绝显示

  2. creator游戏开发基本语法

    写的比较杂乱,类似随笔,随时可能往里面添加修改给lable文本赋值: this.ScoreNumber.getComponent(cc.Label).string = GAME_DATE.MMscor ...

  3. Redis系列(十)--集群cluster

    在之前学习了Master-Slave.Sentinel模式,但是在某些情况下还是无法满足系统对QPS等要求,这时候就需要Cluster,Redis3.0支持了cluster 一.为什么使用Cluste ...

  4. Pytorch 加载保存模型【直播】2019 年县域农业大脑AI挑战赛---(三)保存结果

    在模型训练结束,结束后,通常是一个分割模型,输入 1024x1024 输出 4x1024x1024. 一种方法就是将整个图切块,然后每张预测,但是有个不好处就是可能在边界处断续. 由于这种切块再预测很 ...

  5. Gitlab forbidden

    搭建使用了两年的gitlab 抽风了居然forbidden # vim /etc/gitlab/gitlab.rb gitlab_rails['rack_attack_git_basic_auth'] ...

  6. 动态 SQL（2）

    前面我们学习了使用动态 SQL 的 if.where.trim元素来处理一些简单查询操作,但对于一些 SQL 语句中含有 in 条件,需要迭代条件集合来生成的情况,我们就需要使用 foreach 标签 ...

  7. linux(Ubuntu16)下切换python2和python3(转)

    采用update-alternatives 切换版本 1.打开终端:Ctrl+Alt+T 2.查看update-alternatives的帮助信息:update-alternatives --help ...

  8. idea14远程调试linux下的tomcat

    进入到idea的tomcat的run/debug配置,新建个remote tomcat,然后填写相关信息,如上图(注意远程调试端口). 再选择Startup/Connection,如下图所示: 到此, ...

  9. 教你如何使用Python写游戏辅助脚本

    主要实现方式是通过图片的对比,在游戏中就行点击.运行程序需要以下东西. PIL: 图片处理模块     (python3 换成了 pillow)  下载地址: https://www.lfd.uci. ...

  10. 洛谷 1012 拼数（NOIp1998提高组）

    [题解] 我们要做的就是把这些数排序.排序的时候判断两个数是否交换的方法,就是把这两个数相接形成两个长度相同的数字,比较这两个数字的大小. #include<cstdio> #includ ...