<!-- 圆 -->
<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>
svg
最新推荐文章于 2024-01-27 16:20:11 发布