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

<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. nyoj138 找球号(二）_离散化

    找球号(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...

  2. codeforces 499B.Lecture 解题报告

    题目链接:http://codeforces.com/problemset/problem/499/B 题目意思:给出两种语言下 m 个单词表(word1, word2)的一一对应,以及 profes ...

  3. IE的if条件Hack（兼容性）

    1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉 2. 〈!--[if IE]〉 所有的IE可识别〈![endif]--〉 3. 〈!--[if IE 5 ...

  4. 【leetcode】Reverse Integer（middle）☆

    Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 总结:处理整数溢出 ...

  5. IOS-CoreAnimation

    核心动画 •Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍! •使用它需要先添加QuartzCore.framework和引入对应的框架 ...

  6. Android笔记：四大组件

    1.Activity(是用户可以看到的主要的界面,使用时需要在AndroidManifest.xml中编辑声明.) 启动模式: 启动模式一共有四种,分别是standard.singleTop.sing ...

  7. [Android Pro] 通过包名启动应用

    Intent intent = packageManager.getLaunchIntentForPackage(WEIXIN_PKGNAME); intent.setFlags(Intent.FLA ...

  8. VAssistX的VA Snippet Editor的类注释和函数注释

    title:类注释shortcut:=== /******************************************************** [DateTime]:$YEAR$.$M ...

  9. iOS 语录

    1. 输入法切换: cmd + space 2. xcode 退出全屏control + cmd + f 3. xcode 代码格式化插件Uncrustify,XAlign, CLangFormat ...

  10. hdu 1513

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1513 思路:正反分别求一次LCS,利用滚动数组对二取余滚动 #include<stdio.h&g ...