SVG 编程第一步

最新推荐文章于 2024-09-30 09:17:51 发布

iteye_1989

最新推荐文章于 2024-09-30 09:17:51 发布

阅读量186

点赞数

分类专栏：技术天地文章标签：编程 Firefox XML IBM XHTML

技术天地专栏收录该内容

76 篇文章 0 订阅

订阅专栏

[size=x-large]Supported　Browser[/size]

[list]
[*]Firefox 2+
[*]Opera 9.0+
[*]Safari 3.0+
[*]SeaMonkey 1.1+
[/list]

[size=x-large]SVG Resource [/size]
[list]
[*] [url=http://blog.csdn.net/firefight/archive/2006/09/20/1253440.aspx]SVG 编程告诫[/url]
[*] [url="http://developer.mozilla.org/en/docs/SVG_in_Firefox"]FireFox 对SVG 标签的支持列表[/url]
[*] [url=https://www6.software.ibm.com/developerworks/cn/education/xml/x-svg/tutorial/index.html]SVG Tutorial[/url]
[*][url=http://www.ibm.com/developerworks/cn/xml/x-matters40/]Dev with SVG[/url]
[*][url=http://www.ibm.com/developerworks/cn/xml/x-svgint/index.html]SVG 交互[/url]
[*][url=http://www.w3.org/TR/SVG/types.html#ColorKeywords]SVG 颜色介绍[/url]
[/list]

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


<?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>

[size=x-large]SVG 中画箭头例子[/size]


<?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>