从W3school上学习了一下SVG矢量图形，感觉和HTML相比还是有一些新的元素和属性的，一时间不能全部记住，特此留下笔记，供遗忘时作为参考
<!DOCTYPE html>
<!-- 在<html>标签中声明SVG的XML方言xmlns:svg="http://www.w3.org/2000/svg" -->
<html xmlns:svg="http://www.w3.org/2000/svg"> <head>
<meta charset="utf-8" />
<title>SVG学习记录</title>
</head> <body>
<!-- SVG嵌入HTML的三种方式 -->
<!-- pluginspage：支持<embed>标签的插件的下载地址 -->
<embed src="svg/circle_example.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
<!-- codebase：支持<object>标签的插件的下载地址 -->
<object data="svg/circle_example.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"></object>
<iframe src="svg/circle_example.svg" width="300" height="100"></iframe>
<hr />
<svg width="300" height="100" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<hr />
<p>矩形</p>
<svg width="100%" height="100%" version="1.1">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0)"/>
<!-- 左距离20，上距离20，宽度150，高度70，填充蓝色，边框粉色，边框5px，填充部分透明度0.1，边框透明度0.9 -->
<rect x="400" y="20" width="150" height="70" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>
<svg width="100%" height="100%" version="1.1">
<!-- 定义整个svg的透明度 -->
<rect x="20" y="20" width="80" height="70" style="fill:blue;stroke:pink;stroke-width:5; opacity:0.6"/>
<!-- rx,ry：圆角弧度 -->
<rect x="120" y="20" rx="30" ry="20" width="250" height="50" style="fill:red;stroke:black; stroke-width:5;opacity:0.5"/>
</svg>
<hr />
<p>圆形</p>
<svg width="100%" height="100%" version="1.1">
<!-- cx,cy：横纵坐标 -->
<circle cx="100" cy="50" r="40" stroke="black" strok e-width="2" fill="red"/>
<!-- 椭圆 -->
<ellipse cx="200" cy="60" rx="20" ry="40" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>
<!-- 累叠椭圆 -->
<ellipse cx="540" cy="100" rx="220" ry="30" style="fill:purple"/>
<ellipse cx="520" cy="70" rx="190" ry="20" style="fill:lime"/>
<ellipse cx="510" cy="45" rx="170" ry="15" style="fill:yellow"/>
<!-- 组合椭圆 -->
<ellipse cx="1040" cy="70" rx="220" ry="30" style="fill:yellow"/>
<ellipse cx="1020" cy="70" rx="190" ry="20" style="fill:white"/>
</svg>
<hr />
<p>线条</p>
<svg width="100%" height="100%" version="1.1">
<!-- x1,y1：开始点横纵坐标，x2,y2：结束点横纵坐标 -->
<line x1="10" y1="10" x2="300" y2="40" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>
<hr />
<p>多边形</p>
<svg width="100%" height="100%" version="1.1">
<!-- points：多边形各个点所在位置 -->
<polygon points="0 10,100 130,150 70" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
<polygon points="240 5,60 20,160 70,240 70" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
</svg>
<hr />
<p>折线</p>
<svg width="100%" height="100%" version="1.1">
<!-- 折线各个转折点 -->
<polyline points="0,0 0,10 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
</svg>
<hr />
<p>路径</p>
<svg width="100%" height="100%" version="1.1">
<!-- 路径：(100,10) -> (10,100) -> (100,100) -> (100,10) -->
<path d="M100 10 L10 100 L100 100 Z" />
</svg>
<!-- 复杂图形建议使用SVG编辑器来进行绘制 -->
<svg width="100%" height="500px" version="1.1">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>
<hr />
<p>可用滤镜</p>
<p>
<ul>
<li>feBlend</li>
<li>feColorMatrix</li>
<li>feComponentTransfer</li>
<li>feComposite</li>
<li>feConvolveMatrix</li>
<li>feDiffuseLighting</li>
<li>feDisplacementMap</li>
<li>feFlood</li>
<li>feGaussianBlur</li>
<li>feImage</li>
<li>feMerge</li>
<li>feMorphology</li>
<li>feOffset</li>
<li>feSpecularLighting</li>
<li>feTile</li>
<li>feTurbulence</li>
<li>feDistantLight</li>
<li>fePointLight</li>
<li>feSpotLight</li>
</ul>
</p>
<hr />
<p>高斯滤镜</p>
<svg width="100%" height="100%" version="1.1">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="70" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
<svg width="100%" height="100%" version="1.1">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/><!-- 20 -->
</filter>
</defs>
<ellipse cx="200" cy="70" rx="70" ry="40" style="fill:#ff0000;stroke:#000000; stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>
<hr />
<p>线性渐变</p>
<svg width="100%" height="100%" version="1.1">
<defs>
<!-- <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称 -->
<!-- 水平渐变，x1,y1：渐变开始位置，x2,y2：渐变结束位置 -->
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<!-- <stop>标签用于规定渐变中每个关键节点的颜色，offset用于标记其位置 -->
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" style="fill:url(#orange_red)"/>
<!-- 垂直渐变 -->
<defs>
<linearGradient id="orange-red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="500" cy="70" rx="85" ry="55" style="fill:url(#orange-red)"/>
</svg>
<hr />
<p>放射渐变</p>
<svg width="100%" height="100%" version="1.1">
<defs>
<!-- 参考http://www.w3school.com.cn/svg/svg_grad_radial.asp -->
<!-- r：个人理解为内圈放射范围 -->
<!-- fx,fy：个人理解为内圈中心（即<stop>的offset=0%）所在相对位置 -->
<radialGradient id="grey_blue" cx="40%" cy="40%" r="50%" fx="20%" fy="60%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0.5"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="170" cy="60" rx="100" ry="50" style="fill:url(#grey_blue)"/>
<defs>
<!-- 个人理解 -->
<!-- cx,xy：如果点A(fx,fy)为中心，r为该中心点的放射范围，则B(cx,cy)可以表示为点A放射偏移方向的参照点，如果点A与点B位置重合，则表示放射没有偏移方向，即向四周等量放射-->
<radialGradient id="grey-blue" cx="50%" cy="50%" r="70%" fx="80%" fy="80%">
<stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0.5"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
</defs>
<rect x="500" y="20" width="250" height="100" style="fill:url(#grey-blue);"/>
</svg>
<hr />
<p>动画</p>
<!-- 参考：http://www.w3school.com.cn/svg/svg_examples.asp -->
<!-- 淡出效果 -->
<svg width="100%" height="100%" version="1.1">
<rect x="20" y="20" width="250" height="250" style="fill:blue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>
<!--</svg>-->
<!-- 动态改变多个属性 -->
<!--<svg width="100%" height="100%" version="1.1">-->
<rect id="rec" x="900" y="100" width="300" height="10" style="fill:lime">
<animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="900" to="600"/>
<animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0"/>
<animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="100"/>
<animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="10" to="100"/>
<animateColor attributeName="fill" attributeType="CSS" from="lime" to="gray" begin="1s" dur="5s" fill="freeze"/>
</rect>
</svg>
<svg width="100%" height="100%" version="1.1">
<g transform="translate(50,50)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24">沿路径平移
<animateMotion path="M 0 0 L 50 50" dur="3s" fill="freeze"/>
</text>
</g>
</svg>
<svg width="100%" height="100%" version="1.1">
<g transform="translate(100,100)">
<text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:22; visibility:hidden"> 平移+旋转+缩放
<set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze"/>
<animateMotion path="M 0 0 L 100 30" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze"/>
</text>
</g>
</svg>
<p>SVG元素属性参考手册： <a href="http://www.w3school.com.cn/svg/svg_reference.asp">参考W3School描述</a></p>
</body> </html>