W3CHINA.ORG讨论区--javascript 创建use元素问题

贴子主题： javascript 创建use元素问题

本主题类别:

代码如下：重体字那边有问题，寻求解决

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


	W 3 C h i n a ( since 2003 ) 旗下站点苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》	46.875ms