<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="90%"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="win_init()">
 <defs>
  <path id="Triangle" d="M -14,-4 V 4 L 0,0 z" fill="black" stroke="none"/>
 </defs>
 <style type="text/css">
 <![CDATA[
 .flowRect
 {
  opacity:0.9;
  fill:#eeeeee;
  stroke-width:1;
  stroke:rgb(99,99,99);
 }
 .flowLine
 {
  opacity:0.9;
  fill:#eeeeee;
  stroke-width:1;
  stroke:rgb(99,99,99);
 }
 ]]>
 </style>
 <script type="text/ecmascript"> <![CDATA[
 var SVGNAMESPACE = "http://www.w3.org/2000/svg";
 var XLINKSPACE="http://www.w3.org/2000/xlink/namespace/";
 function win_init()
 {
  createRect(50,50,150,50);
  createLine(200,200,300,200);
  
  createLine(400,200,300,200);
  
  createLine(100,100,300,200);
  
  createLine(300,100,300,200);
  
  createLine(300,300,300,200);
 }
    function createRect(x,y,w,h)
    {
  var e =document.createElementNS(SVGNAMESPACE,"rect");
  
  e.setAttribute("width",w);
  e.setAttribute("height",h);
  e.setAttribute("x",x);
  e.setAttribute("y",y);
  e.setAttribute("rx","10");
  e.setAttribute("ry","10");
  e.setAttribute("class","flowRect");

  document.rootElement.appendChild(e);
    }
    function createLine(x1,y1,x2,y2)
    {
  var g = document.createElementNS(SVGNAMESPACE,"g");
  var e = document.createElementNS(SVGNAMESPACE,"line");
  g.appendChild(e);

  e.setAttribute("x1",x1);
  e.setAttribute("y1",y1);
  e.setAttribute("x2",x2);
  e.setAttribute("y2",y2);
  e.setAttribute("class","flowLine");

  // IE浏览器中正常,FireFox中不能显示
  var t = document.createElementNS(SVGNAMESPACE,"use");
  t.setAttributeNS(XLINKSPACE,"xlink:href","#Triangle");
  t.setAttributeNS(null,"overflow","visible");
  var a=Math.atan2(y2-y1,x2-x1) / Math.PI * 180;
  t.setAttributeNS(null,"transform","translate( " + x2 + ", " + y2 + ") rotate("+ a +")");
  g.appendChild(t);

  var text = document.createElementNS(SVGNAMESPACE,"text");
  text.appendChild(document.createTextNode("abc"));
  text.setAttribute("x",x1 + (x2 - x1)/2);
  text.setAttribute("y",y1 + (y2 - y1)/2);
  document.rootElement.appendChild(text);

  document.rootElement.appendChild(g);
    }
    ]]>
    </script>
    <use xlink:href="#Triangle" transform="translate(233.21, 126.98) rotate(288)" overflow="visible"/>
</svg>