svg 文档

SVG文档的元素基本可以分为以下几类：<br />
动画元素：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>