可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#62cb31">

    <path transform="translate(2)" d="M0 12 V20 H4 V12z">

        <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />

    </path>

    <path transform="translate(8)" d="M0 12 V20 H4 V12z">

        <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.2" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline"  />

    </path>

    <path transform="translate(14)" d="M0 12 V20 H4 V12z">

        <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.4" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />

    </path>

    <path transform="translate(20)" d="M0 12 V20 H4 V12z">

        <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.6" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />

    </path>

    <path transform="translate(26)" d="M0 12 V20 H4 V12z">

        <animate attributeName="d" values="M0 12 V20 H4 V12z; M0 4 V28 H4 V4z; M0 12 V20 H4 V12z; M0 12 V20 H4 V12z" dur="1.2s" repeatCount="indefinite" begin="0.8" keytimes="0;.2;.5;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.8 0.4 0.8" calcMode="spline" />

    </path>

</svg>

　　保存为svg格式可看到一张图片

svg可缩放矢量图形的更多相关文章

  1. SVG :可缩放矢量图形（Scalable Vector Graphics）。

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 使用 XML ...

  2. svg(可缩放矢量图形)

    入门推荐: http://www.ruanyifeng.com/blog/2018/08/svg.html (教程) http://www.runoob.com/svg/svg-reference.h ...

  3. HTML5: SVG （可缩放矢量图形）

    ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...

  4. SVG（可缩放矢量图形）

        SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式.SVG是W3C("World Wide W ...

  5. svg技术（可缩放矢量图形）介绍

    公司里面的产品用图表的地方也比较多,作为平台维护的我,收到几次需求提的建议中包括图表美化的功能,要炫,要3d,立体感,功能要强大等到:平台现有控件都是用的一个开源flash,我对flash虽然会一点但 ...

  6. HTML5 可缩放矢量图形（1）—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

  7. svg整体缩放至指定大小

    一.问题 svg画面跑在分辨率低的电脑上,导致不能完全显示. 二.要求 svg要能够根据电脑的屏幕大小自动缩放至适配电脑的尺寸. 三.实现 1.获取本机窗口高度.宽度 let clientWidth ...

  8. [Swift通天遁地]八、媒体与动画-(5)使用开源类库绘制文字、图形、图像、图表、SVG（可缩放矢量图形）

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. HTML5 可缩放矢量图形（2）—SVG基础

    参考文档——权威 SVG常识 渲染顺序——后来居上:越后面的元素越可见 单位——可以指定,也可以不指定,默认px,其他:em.%.cm.mm... SVG画布——绘制图像的区域,无限大 SVG视窗—— ...

随机推荐

  1. Delphi 精选文章地址

    Delphi 三层开发 ************   http://blog.csdn.net/lailai186/article/category/1396968 Delphi CxGrid 汇总 ...

  2. Windows下安装node

    1.安装node及npm Windows下安装软件都是傻瓜式安装,首先登陆官网(https://nodejs.org/en/)下载对应的node程序,然后双击进行安装.安装过程基本上是点击'Next' ...

  3. uva 489.Hangman Judge 解题报告

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  4. JS里设定延时:js中SetInterval与setTimeout用法

     js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操 ...

  5. C#集合及特殊字符

    集合里面 打印  出来时 要把 集合内的格式转化为其他格式! 壹. 集合 在.add之前 为空   数组  同样  添加元素之前 为  空(下一章超市购物例题具体体现) 1.System Collec ...

  6. 【leetcode】Edit Distance (hard)

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  7. JS调用自定义弹窗【bootstrap】

    function commonConfirm(msg,call){ showConfirmBox("消息提示",msg,call); } $(document).on('click ...

  8. IOS- Run Loops

    Run Loops Run loops是线程相关的的基础框架的一部分.一个run loop就是一个事件处理的循环,用来不停的调度工作以及处理输入事件.使用run loop的目的是让你的线程在有工作的时 ...

  9. .Net如何在后台设置日期格式，并显示在前台页面上

    其实方法比较老咯,有比这个简单的朋友请留言哈,我的思路是先将数据库中的日期格式读出来,在后台转化成DatetTime类型,然后在使用DateTime的内部方法设置日期格式,代码如下: DateTime ...

  10. MFC CheckBox

    if ( BST_CHECKED == IsDlgButtonChecked( IDC_CHECK1 ) ){// 勾选}else{}