Question

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

我尝试使用"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>

Answer 1

SVG区分大小写，因此您必须创建foreignObject元素而不是foreignobject元素。

还有其他一些小问题：

设置xmlns属性将不执行任何操作
<g>元素没有x和y属性
在foreignObject元素上的x和y默认为0，因此也可以省略

使用javascript在svg中创建foreignObject

1 个答案: