<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    html{

        height: 100%;

    }

    body{

        position: relative;

        top:50%;left: 50%;

        transform: translate(-50%,-50%);

        height: 100%;

        margin: 0;

    }

</style>

<body>

    <svg  width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <text text-anchor='middle' font-size='42px' transform='translate(100,120)' fill='#000'>50.0%</text>

        <g>

            <!-- M:将画笔移到指定的坐标位置

            C:三次贝赛曲线

            A:弧线

            Z:关闭路径 -->

            <path fill='rgba(154,205,50,.8)' d='M 0 100 C 140.6 94.24 45.08 106.32 2000 100 A 95 95 0 0 1 0 100 Z'>

                <animate dur='5s' repeatCount='indefinite' attributeName='d' attributeType='XML' values='

                M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z;

                M 0 100 C 145 100,41 100,200 100 A 95 95 0 0 1 0 100 Z;

                M 0 100 C 90 28,92 179,200 100 A 95 95 0 0 1 0 100 Z;'></animate>

            </path>

        </g>

        <circle cx='100' r='80' cy='100' stroke-width='10' stroke='white' fill='transparent'></circle>

        <circle cx='100' r='90' cy='100' stroke-width='20' stroke='yellowgreen' fill='none'></circle>

    </svg>

</body>

</html>

svg(二)---半瓶子晃荡的更多相关文章

  1. HDU3068 回文串 Manacher算法

    好久没有刷题了,虽然参加过ACM,但是始终没有融会贯通,没有学个彻底.我干啥都是半吊子,一瓶子不满半瓶子晃荡. 就连简单的Manacher算法我也没有刷过,常常为岁月蹉跎而感到后悔. 问题描述 给定一 ...

  2. 万能的林萧说：我来告诉你，一个草根程序员如何进入BAT。

    引言 首先声明,不要再问LZ谁是林萧,林萧就是某著名程序员小说的主角名字. 写这篇文章的目的其实很简单,算是对之前LZ一篇文章的补充和完善. 之前LZ写过一篇<回答阿里社招面试如何准备,顺便谈谈 ...

  3. 转载ali面

    引言 首先声明,不要再问LZ谁是林萧,林萧就是某著名程序员小说的主角名字. 写这篇文章的目的其实很简单,算是对之前LZ一篇文章的补充和完善. 之前LZ写过一篇<回答阿里社招面试如何准备,顺便谈谈 ...

  4. 程序人生：02我来告诉你，一个草根程序员如何进入BAT

    本文摘自左潇龙博客,原文出处:http://www.cnblogs.com/zuoxiaolong/p/life54.html 引言 首先声明,不要再问LZ谁是林萧,林萧就是某著名程序员小说的主角名字 ...

  5. 草根程序员如何进入BAT

        首页 最新文章 IT 职场 前端 后端 移动端 数据库 运维 其他技术 - 导航条 - 首页 最新文章 IT 职场 前端 - JavaScript - HTML5 - CSS 后端 - Pyt ...

  6. 小白的python之路 序

    计算机专科毕业,.net开发已有8年有余,中途断断续续,似懂非懂,积累了一些经验知识,但是不求甚解,属于那种一瓶不满半瓶子晃荡,这么一个状态. 主要从事web开发,涉及一些前端jq等,还有接口开发,搜 ...

  7. 使用jprobe建设镜面层叠的原则和见解

    忽然想起的回忆,那是2007上周五在冬季,我看我的老湿调试Linux堆IP层,只看到他改变路由查找的逻辑,然后直接make install上的立竿见影的效果有点,我只知道,,这种逻辑必须再次更改编译内 ...

  8. [分享] IT天空的二十二条军规

    Una 发表于 2014-9-19 20:25:06 https://www.itsk.com/thread-335975-1-1.html IT天空的二十二条军规 第一条.你不是什么都会,也不是什么 ...

  9. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

随机推荐

  1. python使用matplotlib绘制折线图教程

    Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形.下面这篇文章主要介绍了python使用matplot ...

  2. 如何将AAC音频转换成MP3格式

    我们应该怎样将AAC音频转换成MP3格式呢?AAC是一种专为声音数据设计的文件压缩格式,相对于MP3音频来说更加高效,性价比跟高.但是因为MP3音频格式的通用性,我们还是时常需要将AAC音频转换成MP ...

  3. Robot Framework自动化测试Selenium2Library库详细用法

    一.浏览器驱动 通过不同的浏览器执行脚本. Open Browser Htpp://www.xxx.com chrome 浏览器对应的关键字: firefox FireFox ff internete ...

  4. The missing package manager for macOS (or Linux)

    The missing package manager for macOS (or Linux) — Homebrew https://brew.sh/

  5. Torchvision 源码安装[Ubuntu]

    git clone https://github.com/pytorch/vision.git pip install pillow cd vision python setup.py install

  6. MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not provided by any .service files的错误

    MySQL Workbench在archlinux中出现 Could not store password: The name org.freedesktop.secrets was not prov ...

  7. [ Build Tools ] Repositories

    仓库介绍 http://hao.jobbole.com/central-repository/ https://my.oschina.net/pingjiangyetan/blog/423380 ht ...

  8. ATM Mechine (概率DP)

    题意:去银行取最多K钱,想要全部取完,但是有个限制就是如果你输入取钱的额度超过了你已有的钱,那么会接受一次警告并无法取钱,然后求最多不超过w次警告的前提下你取完所有钱所需要的最少次数. 思路:概率DP ...

  9. git help 机器翻译

    该篇发布仅为博主个人保存并参考,内容可能不对 usage: git [--version] [--help] [-C <path>] [-c <name>=<value& ...

  10. Java web开发环境搭配

    1.安装并配置JDK环境(1)安装过程省略(建议安装在自己指定的统一目录下,方便后期查找). (2)配置环境变量 JAVA_HOME:  C:\Java\jdk\jdk1.7.0_45 (jdk安装目 ...