svg

来源：互联网发布：淘宝好评怎么看不到编辑：程序博客网时间：2024/06/04 18:47
    <!-- 圆 -->    <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>
0 0