<!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. MySQL建表、插入语句等

    不定时更新MySQL的一些基础语句以及出现过的问题 5.10 建表语句 CREATE TABLE `policy_landvalue` ( `id` ) NOT NULL AUTO_INCREMENT ...

  2. ERROR org.hibernate.hql.internal.ast.ErrorCounter unexpected token: form 异常解决

    ERROR org.hibernate.hql.internal.ast.ErrorCounter unexpected token: form 异常解决 根据异常提示:我找了我的MySQL语句:果然 ...

  3. Java 批量下载excel，并对excel赋值，压缩为zip文件（POI版）

    package com.neusoft.nda.servlet; import java.io.File;import java.io.FileInputStream;import java.io.F ...

  4. Recurrent NN vs Recursive NN

    https://www.bilibili.com/video/av9770302/?p=8 李宏毅深度学习 图很清楚的反映出两者的不同 Recurrent可以看成Recursive的特殊形式,即以特定 ...

  5. 【托业】【新东方托业全真模拟】TEST09~10-----P5~6

    at no time 绝不,从不 takeover 收购 startup n.启动; 新兴公司(尤指新兴网络公司); 新兴公司,新开张的企业; specific具体的,特定的:factual 事实的, ...

  6. 颜色模式、DPI和PPI、位图和矢量图

    颜色模式:用于显示和打印图像的颜色模型 RGB:电子设备的颜色 CMYF:印刷的颜色 印刷的图像分辨率大于等于120像素/厘米,300像素每英寸 图像分辨率单位为PPI(每英寸像素Pixel per ...

  7. bugfree3.0.1-修改“优先级”“严重等级”为中文

    1.进入目录C:\xampp\htdocs\bugfree\protected\models 2.打开文件 Info.php

  8. python之SQLAlchemy组件

    介绍 SQLAlchemy 是一个 ORM 框架,可以帮助我们使用面向对象的方式快速实现数据库操作. 组成部分: Engine,框架的引擎 Connection Pooling ,数据库连接池 Dia ...

  9. vue 环境报错 chromedriver@2.44.1 install: `node install.js`

    解决办法: 1. yarn add chromedriver -g 2.yarn add chromedriver --chromedriver_cdnurl=http://cdn.npm.taoba ...

  10. byte转bit

    由于项目需要,传过来的数据是高位到低位的Byte,需要输出低位到高位的bool数组. public static bool[] getBits(byte[] byt) { bool[] ret = n ...