zoukankan      html  css  js  c++  java
  • svg(二)---半瓶子晃荡

    <!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>

  • 相关阅读:
    java的map
    linux的date的几个例子
    URI记录
    eclipse进行关联代码
    hive的top n
    python类定义
    sql一些常用的经典语句,最后是select as的用法
    linux,shell脚本set -x的意思
    python循环for,range,xrange;while
    python安装json的方法;以及三种json库的区别
  • 原文地址:https://www.cnblogs.com/peiyao/p/7344445.html
Copyright © 2011-2022 走看看