使用javascript在svg中创建foreignObject
我想使用纯javascript在SVG中创建foreignObject。 我不知道为什么它不起作用。 我的外来对象位于使用javascript在svg中创建foreignObject,javascript,svg,xhtml,Javascript,Svg,Xhtml,我想使用纯javascript在SVG中创建foreignObject。 我不知道为什么它不起作用。 我的外来对象位于元素中。里面是一个简单的div 我尝试使用“requireExtensions”和“xmlns” 我以为我的div在窗口外的某个地方，但我选中了getBoundingClientRect（）而不是 我的代码在这里： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t
“requireExtensions”“xmlns”getBoundingClientRect（）而不是
我的代码在这里：
<!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>
SVG测试
函数init（）{
var svg=document.getElementsByTagName（'svg'）[0]；//获取svg元素
setAttribute（“xmlns”http://www.w3.org/2000/svg");
var g=document.createElements（“http://www.w3.org/2000/svg“，'g'）；//在SVG的命名空间中创建一个g元素
g、 setAttribute（“x”，0）；//设置g dat
g、 setAttribute（“y”，0）；//设置g dat
svg.appendChild（g）；
var newNode=document.createElements（“http://www.w3.org/2000/svg“，'foreignobject'）；//在SVG的命名空间中创建一个rect
setAttribute（“x”，0）；//设置rect数据
setAttribute（“y”，0）；//设置rect数据
setAttribute（“宽度”，“180”）；//设置rect数据
setAttribute（“height”，“80”）；//设置rect数据
g、 追加子节点（newNode）；
var f=新节点；
var newDiv=document.createElement（'div'）；
var divIdName=“div_1”；
newDiv.setAttribute（'id'，divIdName）；
newDiv.innerHTML=“第一”；
f、 新儿童（newDiv）；
}
SVG区分大小写，因此必须创建foreignObject元素，而不是foreignObject元素
还有其他一些小问题：
- 设置xmlns属性不会起任何作用
元素没有x和y属性- foreignObject元素上的x和y默认为0，因此也可以忽略这些元素