快速了解viewBox的参数viewBox属性是用于指定用户SVG图像的坐标系统的原点以及尺寸的。所有在SVG内绘制的内容都是相对于这个坐标系统完成的。因为SVG画布在所有方向都是无限延长的，你甚至可以在这个坐标系统的边界之外的地方绘制图

SVG 背景SVG是Scalable Vector Graphics的缩写，意为可缩放矢量图形。1998年，万维网联盟成立了一个工作组，研发一种通过XML来表现矢量图形的技术——SVG！由于SVG也

HTML5新特新 HTML5 中的一些有趣的新特性： 1、用于绘画的 canvas 元素 2、用于媒介回放的 video 和 audio 元素 3、对本地离线存储的更好的支持 4、新的特殊内容元素，比如 article、footer、hea

VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。SVG 在 2003 年 1

圆环倒计时我们经常见到，实现的方法也有很多种。但是本文将介绍一种全新的实现方式，使用SVG来实现倒计时功能。本文主要用到了SVG的stroke-dasharray和stroke-dashoffset特性。下图是倒计时运行效果：SVG倒计时

先在页面任意区域放上这段代码stdDeviation设置模糊量，最低0<svg style="display:none"><filter id="blur-effect-1">

代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNGJPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势：SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG

之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：代码非常简单：<svg wid

NO.1前言Tooltips常被称为提示框（或信息提示框），提示框能够以较强的交互性、自由度为用户提供相应的提示信息。今天我们要聊的不是如何实现强大的交互行为，而是来看看如何以最好的方式来还原他们的视觉效果，并且能适用于不同的场景。N

最新有个功能需要截取网页成图片，于是用到比较流行的html2canvas，本来以为能顺顺利利的搞定，后来发现网页上的流程图连接线不在截图中。于是各种百度、bing，也搜到好多，但是感觉没有一个完整的代码，现在自己解决了，分享下代码。首先需要