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

<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. shell 脚本编程概述

    环境变量 ? 退出状态码 (成功) (未知错误) (误用 shell 命令) (命令不可执行) (没找到命令) (无效退出状态) +x( linux 信号 X 的严重错误) ( ctrl c 终止程序 ...

  2. UIButton修改文字大小问题

    一.问题描述 通过UIButton对象font属性设置文字大小,却发现该属性在2.0.3.0就已经被废弃,ios不建议使用. 图1-1:点出UIButton对象的font属性提示被废弃 图1-2:UI ...

  3. 1616 最小集合 51NOD（辗转相处求最大公约数+STL）

    1616 最小集合 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题  收藏  关注 A君有一个集合. 这个集合有个神奇的性质. 若X,Y属于该集合,那么X与Y的最大 ...

  4. ios调用c#后台接口报文格式

    - NSString *soapMessage = - [NSString stringWithFormat: - @"<?xml version=\"1.0\" ...

  5. 公共数据访问对象接口CommDao

    package org.guangsoft.dao; import java.util.List; import java.util.Set; /** * 公共DAO功能 * @param <K ...

  6. Does the OpenSceneGraph have a native file format?

    From OpenSceneGraph-3.0 onwards we have new native file formats based on generic serializers that ar ...

  7. 模拟操作网页 webBrowser

    C# 获取IFrame中body元素 (winform) 方法1. 找出iframe的b.html的src , 利用webbrowser去加载b.html HtmlElementCollection ...

  8. 营业额统计（bzoj1588）

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  9. 【SSO单点系列】（1）：CAS4.0 环境的搭建

    一.概述 今天开始写CAS相关的第一篇文章,这篇文章主要是关于CAS环境的搭配,提供给刚刚接触CAS的一个入门指南,并演示一个CAS的最简单的实例 二.环境要求 博主的环境如下: win8.1 64 ...

  10. Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于che ...