svg 文档
动画元素：animate, animateColor, animateMotion, animateTransform, set；<br />
解释元素：desc, metadata, title；<br />
图形元素：circle, ellipse, line, path, polygon, polyline, rect；<br />
结构元素：defs, g, svg, symbol, use；<br />
渐变元素：linearGradient, radialGradient；<br />
其他元素：a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。<br />
视窗-svg元素<br />
可以在svg元素中以任何顺序放置任何的其他元素，包括嵌套svg元素。<br />
svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。<br />
svg元素支持的事件也是常用的onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload等。<br />
解释性元素 - desc元素与title元素<br />
每个容器元素和图形元素都可以包含desc和title元素，这两个元素都是辅助性的元素，用于解释相关情境；它们的内容都是文本。<br />
标记 - marker元素（箭头）<br />
标记定义了附加到一个或者多个顶点(path,line,polyline或者polygon的顶点)上的图形元素(箭头和多点标记)。<br />
箭头可以通过把一个标记附加到path,line或者polyline的起点或者终点上。<br />
多点标记可以把一个标记附加到path,line,polyline或者polygon的所有顶点上。<br />
标记是由marker元素定义的，然后在path,line,polyline或者polygon中设置相关的属性(marker,marker-start,marker-mid,和marker-end)就可以了。<br />
1. marker是容器元素，可以存放任意顺序的图形元素，容器元素，动画，渐变元素等。<br />
2. marker元素可以创建新的视窗：设置viewBox的值。<br />
3. marker比较重要的属性：<br />
markerUnits = "strokeWidth | userSpaceOnUse"<br />
这个属性定义了属性markerWidth,markerHeight和marker的内容使用的坐标系统<br />
这个属性有2个值可选，第一个值strokeWidth是默认值，代表属性markerWidth,markerHeight和marker的内容使用的坐标系统的单位等于引用该marker的图形元素的stroke-width设置的值。<br />
refX,refY：定义了引用的点与marker对齐的位置坐标。例如上面的例子中，引用的点是终点，要把它对齐到marker的(0,5)位置。注意refX,refY使用的是经过viewBox变换过的最终用户坐标系。<br />
orient：定义了marker旋转的角度。可以指定一个角度或者直接赋值auto。<br />
脚本与样式 - script元素与style元素<br />
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<desc>Text</desc> <defs>
<style type="text/css">
<![CDATA[
.abbreviation { text-decoration: underline; }
]]>
</style>
</defs>
<g>
<text x="20" y="50" font-size="30">Colors can be specified</text>
<text x="20" y="100" font-size="30">by their
<tspan fill="rgb(255,0,0)" class="abbreviation">R</tspan>
<tspan fill="rgb(0,255,0)" class="abbreviation">G</tspan>
<tspan fill="rgb(0,0,255)" class="abbreviation">B</tspan> values</text>
<text x="20" y="150" font-size="30">or by keywords such as</text>
<text x="20" y="200">
<tspan style="fill: lightsteelblue; font-size:30">lightsteelblue</tspan>,
</text>
</g>
</svg>
svg中还可以使用js,
<script type="text/ecmascript">
<![CDATA[
function hideReveal(evt) {
var imageTarget = evt.target;
var theFill = imageTarget.getAttribute("fill");
if (theFill == 'white')
imageTarget.setAttribute("fill", "url(#notes)");
else
imageTarget.setAttribute("fill", "white");
}
]]>
</script>
条件处理 - switch元素<br />
条件处理属性是能控制所在元素渲染与否的属性。<br />
基本上大多数的元素(特别是图形元素)都可以指定条件处理属性<br />
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="5cm" height="5cm">
<switch>
<text x='10' y='20' systemLanguage="de" fill="red">de - HAHA</text>
<text x='10' y='20' systemLanguage="en" fill="blue">en - haha</text>
</switch>
<switch>
<!--
使用的浏览器支持filter特性，那么就绘制上面的矩形(带filter属性)，如果不支持filter特性，就绘制下面的矩形。
-->
<rect requiredFeatures= "http://www.w3.org/TR/SVG11/feature#Filter "
x= "10 " y= "10 " width= "322 " height= "502 " opacity= "0.6 "
fill= "black " stroke= "none " filter= "#ccc " />
<rect x= "10 " y= "10 " width= "322 " height= "502 " opacity= "0.6 "
fill= "black " stroke= "none " />
</switch>
</svg>