svg

    <!-- 圆 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
    <!-- 方 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <rect width="100" height="100" x="100" style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,255);fill-opacity:.5;stroke-opacity:.9" rx="20" ry="20"/>
    </svg>
    <!-- 椭圆 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="100" cy="100" rx="200" ry="80" style="stroke-width:2;stroke:orange;fill:pink;opacity:.5"/>
        <ellipse cx="100" cy="100" rx="100" ry="40" style="stroke-width:2;stroke:orange;fill:black;opacity:.5"/>
    </svg>
    <!-- 线 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="0" x2="100" y2="100" style="stroke-width:2;stroke:black;" />
    </svg>
    <!-- 多边形 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <polygon points="0,0 100,100 100,0" style="stroke:red;stroke-width:2;fill:orange;opacity:.6" />
    </svg>
    <!-- 折线 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <polyline points="0,0 10,10 10,0 20,10" style="stroke-width:2;stroke:black;" />
    </svg>
    <!-- 路径 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 0 L100 0 L100 100 Z" />
    </svg>
    <!-- 滤镜 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="Gaussian_Blur">
                <feGaussianBlur in="SourseGraphic" stdDeviation="3" />
            </filter>
        </defs>
        <ellipse cx="100" cy="100" rx="200" ry="80" style="stroke-width:2;stroke:orange;fill:pink;opacity:.5;filter:url(#Gaussian_Blur);"/>
    </svg>
    <!-- 线性渐变 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:orange;stop-opacity:.5;"/>
                <stop offset="100%" style="stop-color:red;stop-opacity:.5;"/>
            </linearGradient>
        </defs>
        <ellipse cx="100" cy="100" rx="100" ry="50" style="fill:url(#orange_red)" />
    </svg>
    <!-- 放射渐变 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:grey;stop-opacity:0" />
                <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
            </radialGradient>
        </defs>
        <ellipse cx="100" cy="100" rx="100" ry="50" style="fill:url(#grey_blue)" />
    </svg>
    <!-- 三次贝塞尔曲线 -->
    <svg width="100%" height="200%" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50 C10 50 50 50 50 100 S100 100 100 50" style="stroke-width:2;stroke:black;fill:none" />
        <text x="50" y="60">A</text>
    </svg>
    <!-- 二次贝塞尔曲线 -->
    <svg width="100%" height="200%" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 50 Q25 0 50 50 T100 50" style="stroke-width:2;stroke:black;fill:none" />
        <text x="50" y="60">A</text>
    </svg>
    <!-- set 延时 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-family="microsoft yahei" font-size="60" x="100" y="100">马
                <set attributeName="x" to="30" begin="3s" />
            </text>
        </g>
    </svg>
    <!-- animate 动画 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-family="microsoft yahei" font-size="30" x="50" y="50">
                马
                <animate attributeName="x" from="50" to="100" begin="0s" dur="3s" repeatCount="indefinite" />
            </text>
        </g>
    </svg>
    <!-- animateTransform 变换 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-family="microsoft yahei" font-size="30" x="50" y="50">
                马
                <animateTransform attributeName="transform" type="scale" from="1" to="1.5" begin="0s" dur="3s" repeatCount="indefinite"/>
            </text>
        </g>
    </svg>
    <!-- animateMotion 移动 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <text font-family="microsoft yahei" font-size="24" x="0" y="0" fill="#cd0000">
            马
            <animateMotion Path="M0 50 C0 100 50 100 50 50 S150 0 200 30" begin="0s" dur="3s" repeatCount="indefinite" />
        </text>
        <path d="M0 50 C0 100 50 100 50 50 S150 0 200 30" stroke="red" stroke-width="2" fill="none"/>
    </svg>
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <text font-family="microsoft yahei" font-size="24" x="0" y="0" fill="#cd0000">
            马
            <animateMotion Path="M0 50 C0 100 50 100 50 50 S150 0 200 30" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/>
        </text>
        <path d="M0 50 C0 100 50 100 50 50 S150 0 200 30" stroke="red" stroke-width="2" fill="none"/>
    </svg>
    <!-- 自由组合 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <g>
            <text font-family="microsoft yahei" font-size="60" x="50" y="50">
                马
                <animate attributeName="x" from="50" to="200" begin="0s" dur="3s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="1" to="0.5" begin="0s" dur="3s" repeatCount="indefinite"/>
            </text>
        </g>
    </svg>
    <!-- values begin -->
    <!-- begin="id.end-1";beeing="id.click+1";begin="id.repeat(2)+3";begin="accessKey(s)"-->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <text font-family="microsoft yahei" font-size="60" x="50" y="50">马
            <animate attributeName="x" values="50;100;50" begin="0s;3s" dur="3s" />
        </text>
    </svg>
    <!-- values keyTimes -->
    <animate attributeName="x" values="50;100;50" keyTimes="0;0.2;1" begin="0s" dur="3s" repeatCount="indefinite" id="animate"/>
    <!-- a触发动画 -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <text font-family="microsoft yahei" font-size="60" x="50" y="50">马
            <animate attributeName="x" values="50;100;50" begin="indefinite" dur="3s" repeatCount="indefinite" id="animate"/>
        </text>
        <a xlink:href="#animate">
            <text font-family="microsoft yahei" font-size="10" x="0" y="10">点击</text>
        </a>
    </svg>
    <!-- fill additive -->
    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <text font-family="microsoft yahei" font-size="60" x="50" y="50">马
            <animateMotion path="M0 100 L100 100" dur="1s" begin="0s" fill="freeze" additive="sum"/>
            <animateMotion path="M0 100 L100 100" dur="1s" begin="1s" fill="freeze" additive="sum"/>
        </text>
    </svg>