中文XML论坛 - 专业的XML技术讨论区--显示贴子

以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 SVG/GML/VRML/X3D/XAML 』  (http://bbs.xml.org.cn/list.asp?boardid=21)
----  [求助]初学 SVG，请教一个 createElement 的问题，谢谢！  (http://bbs.xml.org.cn/dispbbs.asp?boardid=21&rootid=&id=61742)

--  作者：kyll
--  发布时间：4/24/2008 9:01:00 AM

--  [求助]初学 SVG，请教一个 createElement 的问题，谢谢！
请教一下：
怎样通过 JavaScript 动态创建 SVG 图形元素啊？

以下是我的代码，执行之后没有任何效果，我用的是 Firefox 2.0 浏览器。
HTML 部分：
<html>
<head>
  <script type="text/javascript" language="JavaScript">
   function getSvgDoc() {
    var object = document.getElementById("svg");
    var svgDoc = null;
    if (object != null) {
     if (object.contentDocument != null) {
      svgDoc = object.contentDocument;
     } else if (typeof object.getSVGDocument != 'undefined') {
      svgDoc = object.getSVGDocument();
     }
    }
    return svgDoc;
   }

   function drawRect(evt) {
    alert(evt);
    var svgDoc = getSvgDoc();
    var rect = svgDoc.createElement("rect");
    rect.setAttribute("x", "50");
    rect.setAttribute("y", "50");
    rect.setAttribute("width", "200");
    rect.setAttribute("height", "200");
    svgDoc.appendChild(rect);
   }
  </script>
</head>
<body>
  <embed id="svg" src="processDefinition.svg" width="100%" height="100%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
  </embed>
</body>
</html>

SVG 部分：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

--  作者：zpjdgp888
--  发布时间：4/29/2008 9:24:00 AM

--
SVG文件：processDefinition.svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

HTML文件：
<html>
<head>
<script type="text/javascript" language="JavaScript">

var vx=0, vy=0;
function drawRect(evt) {
  vx+=50;
  vy+=50;
  var svgDoc=evt.target.ownerDocument;
  var rect=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttributeNS(null, "x", vx);
  rect.setAttributeNS(null, "y", vx);
  rect.setAttributeNS(null, "width", "200");
  rect.setAttributeNS(null, "height", "200");
  rect.setAttributeNS(null, "style", "stroke:#ff0000;fill:#000000;");
  svgDoc.documentElement.appendChild(rect);
}
  </script>
</head>
<body>
  <embed id="svg" src="processDefinition.svg" width="100%" height="100%" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">
  </embed>
</body>
</html>

--  作者：zpjdgp888
--  发布时间：4/29/2008 9:25:00 AM

--
对了，我用的IE6.0+Adob的中文SVG插件看的，正常效果

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

62.500ms