zoukankan      html  css  js  c++  java
  • svg学习笔记(二)

    SMIL animation演示代码集锦

    <svg width="1400" height="1600" xmlns="http://www.w3.org/2000/svg">
            <text font-family="microsoft yahei" font-size="120" y="160" x="160"><set attributeName="x" attributeType="XML" to="30" begin="2s"></set>
            </text>
            <g transform="translate(200,160)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
                </text>
            </g>
            <g transform="translate(320,320)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
                </text>
            </g>
            <g transform="translate(480,480)">
                <text font-family="microsoft yahei" font-size="80" y="100" x="100"><animateTransform attributeName="transform" begin="0s" dur="3s"  type="scale" from="1" to="1.5" repeatCount="indefinite"/>
                </text>
            </g>
            <g transform="translate(480,80)">
                <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000"><animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion>
                </text>
                <path id="horsePath" d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none"/>
            </g>
            <g transform="translate(640,180)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
                    <animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
                </text>
            </g>
            <g transform="translate(640,360)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
                </text>
            </g>
            <g transform="translate(640,520)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate attributeName="x" values="160;40;160" dur="3s" begin="2s;6s" />
                </text>
            </g>
            <g transform="translate(640,680)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate id="x" attributeName="x" to="60" begin="0s" dur="1.5s" fill="freeze" />
                    <animate attributeName="y" to="100" begin="x.end-0.5" dur="1.5s" fill="freeze" />
                </text>
            </g>
            <g transform="translate(760,20)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160" id="clickText"><animate attributeName="x" to="60" begin="clickText.click" dur="3s" />
                </text>
            </g>
            <g transform="translate(760,180)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate id="x0" attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" />
                    <animate attributeName="y" to="100" begin="x0.repeat(2)" dur="2s" fill="freeze" />
                </text>
            </g>
            <!--快捷键仅在FF下支持-->
            <g transform="translate(760,340)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160"><animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" />
                </text>
            </g>
            <g transform="translate(760,500)">
                <text font-family="microsoft yahei" font-size="120" y="160" x="160" id="indefiniteText"><animate attributeName="x" to="60" begin="indefinite" dur="3s" id="indefiniteA"/>
                </text>
                <a xlink:href="#indefiniteA">
                    <text x="300" y="200" fill="#cd0000" font-size="30">不要点我</text>
                </a>
            </g>
    
            <g transform="translate(10,500)">
                <text font-size="60" y="60" x="160"><animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
                </text>
                <text font-size="60" y="120" x="160"><animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="paced"/>
                </text>
                <text font-size="60" y="180" x="160"><animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
                </text>
                <text font-size="60" y="240" x="160"><animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />
                </text>
            </g>
    
            <g transform="translate(10,800)">
                <text font-size="30" y="180" x="130"><animateTransform attributeName="transform" type="scale" from="1" to="3" dur="5s" repeatCount="indefinite" additive="sum"/>
                    <animateTransform attributeName="transform" type="rotate" from="0 30 20" to="60 30 20" dur="5s" repeatCount="indefinite" additive="sum"/>
                </text>
            </g>
        </svg>
  • 相关阅读:
    【BZOJ 3090】 树形DP
    【BZOJ 2323】 2323: [ZJOI2011]细胞 (DP+矩阵乘法+快速幂*)
    【BZOJ 1019】 1019: [SHOI2008]汉诺塔 (DP?)
    【BZOJ 3294】 3294: [Cqoi2011]放棋子 (DP+组合数学+容斥原理)
    【BZOJ 3566】 3566: [SHOI2014]概率充电器 (概率树形DP)
    【BZOJ 2121】 (字符串DP,区间DP)
    【BZOJ 4305】 4305: 数列的GCD (数论)
    【UOJ 179】 #179. 线性规划 (单纯形法)
    【BZOJ 4568】 4568: [Scoi2016]幸运数字 (线性基+树链剖分+线段树)
    【BZOJ 4027】 4027: [HEOI2015]兔子与樱花 (贪心)
  • 原文地址:https://www.cnblogs.com/w3cape/p/5285094.html
Copyright © 2011-2022 走看看