<!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. VUEX新笔记

    $store.commit('abc'),const mutations={abc:(state)=>{ state.flag='mutations' }} 多个mutations时用到dist ...

  2. 补充：MySQL经典45道题型

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher). 四个表的结构分别如表1-1的表(一)~表 ...

  3. PHP（css样式）

    布局页面的时候 大色块 小色块 ...(就是宽高) 内容布局:浮动,定位,显示,层级 浮动:float(样式名):值:left right设一个父标签,设定宽高,里面随便浮动!!!!!!!!!!!!! ...

  4. Python学习之旅（三十一）

    Python基础知识(30):图形界面(Ⅰ) Python支持多种图形界面的第三方库:Tk.wxWidgets.Qt.GTK等等 Tkinter可以满足基本的GUI程序的要求,此次以用Tkinter为 ...

  5. mysql InnoDB锁等待的查看及分析

    说明:前面已经了解了InnoDB关于在出现锁等待的时候,会根据参数innodb_lock_wait_timeout的配置,判断是否需要进行timeout的操作,本文档介绍在出现锁等待时候的查看及分析处 ...

  6. easyui combobox 去空格事件 去掉，结果输入空格体验不畅的感觉,让combobox能够输入空格

    $("[comboname=name]").next("span").find("input.textbox-text").unbind(& ...

  7. python全栈开发 * 09知识点汇总 * 1806011

    09 函数初识一 函数的的定义# 函数: 对代码块和功能的封装和定义# 引入 回家过程 未用函数# print("步行")# print("坐地铁")# pri ...

  8. 不简单的工厂：实际体验 .NET Core 2.1 新生物 HttpClientFactory

    在 HttpClientFactory 出生之前,由于 HttpClient 臭名昭著的“dispose之后4分钟TCP连接才会被关闭”问题(详情),只能使用单例或静态的 HttpClient ,比如 ...

  9. 一个完整的hadoop程序开发过程

    目的 说明hadoop程序开发过程 前提条件 ubuntu或同类OS java1.6.0_45 eclipse-indigo hadoop-0.20.2 hadoop-0.20.2-eclipse-p ...

  10. Codeforces 677 - A/B/C/D/E - (Undone)

    链接: A - Vanya and Fence - [水] AC代码: #include<bits/stdc++.h> using namespace std; ; int n,h; in ...