使用javascript在svg中创建foreignObject

我想使用纯javascript在SVG中创建foreignObject。我不知道为什么它不起作用。我的异物处于<g>元素中。里面是一个简单的div。使用javascript在svg中创建foreignObject

我尝试使用"requiredExtensions"和"xmlns" 我认为我的DIV某处窗外，但我检查getBoundingClientRect().left;而事实并非如此。

我的代码是在这里：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 

<title>SVG TEST</title> 
<style> 

</style> 
<script> 
    function init(){ 
     var svg = document.getElementsByTagName('svg')[0]; //Get svg element 
     svg.setAttribute("xmlns","http://www.w3.org/2000/svg"); 
     var g=document.createElementNS("http://www.w3.org/2000/svg", 'g'); //Create a g element in SVG's namespace 
     g.setAttribute("x",0); //Set g dat 
     g.setAttribute("y",0); //Set g dat 
     svg.appendChild(g); 

     var newNode = document.createElementNS("http://www.w3.org/2000/svg", 'foreignobject'); //Create a rect in SVG's namespace 
     newNode.setAttribute("x",0); //Set rect data 
     newNode.setAttribute("y",0); //Set rect data 
     newNode.setAttribute("width","180"); //Set rect data 
     newNode.setAttribute("height","80"); //Set rect data 
     g.appendChild(newNode); 

     var f=newNode; 

     var newDiv = document.createElement('div');  
     var divIdName = "div_1"; 
     newDiv.setAttribute('id',divIdName); 
     newDiv.innerHTML = "First"; 
     f.appendChild(newDiv); 
    } 
    </script> 
</head> 

<body onload="init()"> 

    <svg id="svg" width="300px" height="300px"/> 

</body> 
</html>

来源

2014-10-03 Aleksander Sawicki

SVG是大小写敏感的，所以你必须创建一个foreignObject元素，而不是一个foreignobject元素。

还有一些其他的小事情错得：

设置了xmlns属性将做什么
<g>元素没有x和y属性
x和y的foreignObject元素默认0所以那些也可以省略

来源

2014-10-03 06:57:43

使用javascript在svg中创建foreignObject

回答

相关问题