2008-01-09

SVG 编程第一步

关键字: xml svg
Supported　Browser

  • Firefox 2+
  • Opera 9.0+
  • Safari 3.0+
  • SeaMonkey 1.1+


SVG Resource


把SVG嵌入到网页中的3种方式
  • Use <object> Tag
  • Use <embed> Tag (Best Practice)
  • As embeded namespace 


<?xml version="1.0" standalone="no"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>SVG as embedded object and nested namespace</title>
</head>
<body>
<h2>Object tag</h2>
<object type="image/svg+xml" data="standalone.svg">
Your browser is currently unable to display SVG images.
</object>
<h2>Nested namespace</h2>
<svg:svg version="1.1" width="5cm" height="4cm"
      xmlns:svg="http://www.w3.org/2000/svg">
  <svg:title>Four rectangles</svg:title>
  <svg:rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
  <svg:rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
  <svg:rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
  <svg:rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
  <!-- Show outline of canvas using 'rect' element -->
  <svg:rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
       fill="none" stroke="blue" stroke-width=".02cm" />
</svg:svg>
<h2>Embed tag</h2>
<embed id="svg3" src="standalone.svg" />
</body>
</html>


SVG 中画箭头例子 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Markers</desc>
  <defs>
    <marker id="arrow"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
      orient="auto">

      <path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>

    </marker>
  </defs>
  <rect x="1" y="1" width="398" height="300"
        fill="none" stroke="blue" />

  <!-- First row -->
  <path d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"
        stroke="purple" stroke-width="5" fill="none"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />

  <!-- Second row -->
  <path d="M75,200 c25,-75 50,50 100,0 s50,-50 150,50"
        stroke="purple" stroke-width="3" fill="none"
        marker-start="url(#arrow)"
        marker-mid="url(#arrow)"
        marker-end="url(#arrow)" />
</svg>


SVG 中用鼠标划线 例子 

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" 
     width='100%' height='100%'
    onload='Init(evt)'   onmousedown='Grab(evt)'    onmousemove='Drag(evt)' onmouseup='Drop(evt)'>
   <title>Drag And Drop</title>
   <desc>
      A Demo to Draw line in SVG Canvas
   </desc>
   <defs>
    <marker id="arrow"
      viewBox="0 0 10 10" refX="0" refY="5" 
      markerUnits="strokeWidth" markerWidth="3" markerHeight="10"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="yellow" stroke="black"/>
    </marker>
   </defs>
   <script type="text/ecmascript"><![CDATA[
      var SVGDocument = null;
      var SVGRoot = null;
      var BackDrop = null;
      var isDrawLine = null;
      var gCanvas = null;
      var lineNode = null;

      function Init(evt)
      {
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;

         // this will serve as the canvas over which items are dragged.
         //    having the drag events occur on the mousemove over a backdrop
         //    (instead of the dragged element) prevents the dragged element
         //    from being inadvertantly dropped when the mouse is moved rapidly
         BackDrop = SVGDocument.getElementById('BackDrop');
         gCanvas = SVGDocument.getElementById('gid');
      }

      function Grab(evt)
      {   
          lineNode=SVGDocument.createElementNS('http://www.w3.org/2000/svg','line');
          lineNode.setAttributeNS(null,'x1',evt.clientX);
          lineNode.setAttributeNS(null,'y1',evt.clientY);
          lineNode.setAttributeNS(null,'x2',evt.clientX);
          lineNode.setAttributeNS(null,'y2',evt.clientY);
          lineNode.setAttributeNS(null,'stroke','blue');
          lineNode.setAttributeNS(null,'stroke-width','2');
          BackDrop.parentNode.appendChild(lineNode);
          isDrawLine = true;
      };
      function Drag(evt)
      {
         // if we don't currently have an element in tow, don't do anything
         if (isDrawLine)
         {
            lineNode.setAttributeNS(null,'x2',evt.clientX);
            lineNode.setAttributeNS(null,'y2',evt.clientY);
            lineNode.setAttributeNS(null,'marker-end','url(#arrow)');
         }
      };
      function Drop(evt)
      {
         // if we aren't currently dragging an element, don't do anything
         if ( isDrawLine )
         {
            lineNode.setAttributeNS(null,'x2',evt.clientX);
            lineNode.setAttributeNS(null,'y2',evt.clientY);
            isDrawLine = false;
         }
      };
   ]]></script>
  <g id="gid">
   <rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%' fill='none' pointer-events='all' />
  </g>
</svg>
评论
发表评论

您还没有登录，请登录后发表评论

Ivan Li
搜索本博客
最近加入圈子
存档
最新评论