<!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运用2

    1.变量提升 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window,window分两个模块,一个叫内存模块,内存模块找到当前作用域下的所有的带var和functi ...

  2. 脚本一键部署lnmp

    [root@ycj ~]# wget -c http://soft.vpser.net/lnmp/lnmp1.1-full.tar.gz && tar zxf lnmp1.1-full ...

  3. [py]GTM和UTC及python的时间戳

    时间戳是一串字符串 time.time() 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总毫秒数.通俗的讲, 时间戳是一 ...

  4. char 类型的操作函数

    1.内存充填 void *memset(void *s,int ch,size_t n); 是由C Run-time Library提供的提供的函数,作用是在一段内存块中填充某个给定的值,它是对较大的 ...

  5. iPhoneX快速适配，简单到你想哭。

    研究了5个小时的iPhoneX适配. 从catalog,storyboard,safearea等一系列文章中发现.如果我们想完全撑满全屏.那直接建一个storyboard就好了.但撑满全屏后,流海就是 ...

  6. 在 .Net Core1.0 上使用Mysql 的EFcore

    https://www.codeproject.com/Articles/1218348/Using-EF-Core-with-MySQL-in-DotNet-Core

  7. 《linux就该这么学》第十节课：第8章iptables和firewalld

            网卡配置: 物理机:192.168.10.1/24 服务器:192.168.10.10/24 客户端:192.168.10.20/24         1.vim  /etc/sysc ...

  8. ServletContext详解(转)

    ServletContext,是一个全局的储存信息的空间,服务器开始,其就存在,服务器关闭,其才释放.request,一个用户可有多个:session,一个用户一个:而servletContext,所 ...

  9. ArchLinux安装Sublime Text 3

    安装方法: 在 /etc/pacman.conf中添加 [archlinuxcn] SigLevel = Optional TrustAll Server = http://repo.archlinu ...

  10. python 使用函数参数注解

    使用函数参数注解是一个很好的办法,它能提示程序员应该怎样正确使用这个函数. 函数注解只存储在函数的annotations 属性中