<!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. js运用4

    ---恢复内容开始--- 1.函数    关键字function 复习 var  是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. var可以在内存模块提前(js代码执行 ...

  2. Python学习之旅（二十八）

    Python基础知识(27):常用内建模块(Ⅲ) 1.urlblib urllib提供了一系列用于操作URL的功能 url是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示, ...

  3. spring boot maven META-INF/MAINIFEST.MF

    unzip -p charles.jar META-INF/MANIFEST.MF https://blog.csdn.net/isea533/article/details/50278205 htt ...

  4. ES6 数组

    数组创建 Array.of() 将参数中所有值作为元素形成数组. console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] // 参数值可为不同类型 con ...

  5. es6合并数组...

    加了...和不加...是不一样,...会把原来数组拆开

  6. 面向对象编程之OC

    面向对象概述 面向对象是一种符合人类思想习惯的编程思想.现实生活中存在各种形态不同的事物,这些事物之间存在着各种各样的联系,在程序中使用对象来映射现实中的事物,使用对象的关系来描述事物之间的联系,这种 ...

  7. kendo treeview checkbox初始化选中问题，没解决，暂时记录下

    想做带有checkbox的tree,由于项目一直用kendo ui for mvc,感觉 牛逼的kendo肯定有tree.结果碰到了选中的问题. 无法根据后台传来的IsChecked字段来设置  tr ...

  8. 蓝桥杯2018 B组 第九题

    #include <bits/stdc++.h> #define M 1005 using namespace std; int n; char map1[M][M]; bool vis[ ...

  9. 聊聊return false

    最近在做一些关于视频切换的时候.由于是用a标签做的会有默认的跳转.这时候我就想到了,return flase.阻止默认行为,也达到了预期的效果.后来就详细查了查.让我们来看看 “return fals ...

  10. 【winform】listbox 列表

    一.Item 一个ListBox是由一个个的Item项组成的 1.向下添加Item lstResult.Items.Add("***" + PostWebRequest(cbxUr ...