使用javascript在svg中动态添加外来对象_Javascript_Svg

使用javascript在svg中动态添加外来对象

javascript svg

使用javascript在svg中动态添加外来对象,javascript,svg,Javascript,Svg,当我运行此代码时，它会显示一个空白屏幕，但当我使用chrome中的开发者工具更新代码时，它会显示数据。请帮我解释一下为什么在我使用chrome的开发者工具更新代码时会出现这种情况，这是由于浏览器再次运行时的DOM造成的，如果是，那么为什么不在第一次显示时1。这是否是由于外来物体造成的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" />

当我运行此代码时，它会显示一个空白屏幕，但当我使用chrome中的开发者工具更新代码时，它会显示数据。请帮我解释一下为什么在我使用chrome的开发者工具更新代码时会出现这种情况，这是由于浏览器再次运行时的DOM造成的，如果是，那么为什么不在第一次显示时1。这是否是由于外来物体造成的

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>
        <text x="10" y="10">hello</text>
    </g>
    </svg>
        <script>
            var s = document.getElementById('t');
            var g = s.childNodes[1];
            console.log(g.childNodes[1].remove());
            var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");

            foreign.setAttribute('width', 500);
            foreign.setAttribute('height', 150);
            var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            txt.setAttribute('x', '10');
            txt.setAttribute('y', '10');
            var t = document.createTextNode("This is a paragraph.");
            txt.appendChild(t);
            foreign.appendChild(txt);
            g.appendChild(foreign);

 </script>        
</body>
</html>


你好
var s=document.getElementById（'t'）；
var g=s.childNodes[1]；
log（g.childNodes[1].remove（））；
var foreign=document.createElements（'http://www.w3.org/2000/svg“外国物体”）；
foreign.setAttribute（'width'，500）；
foreign.setAttribute（'height'，150）；
var txt=document.createElements（'http://www.w3.org/2000/svg","文本",；
setAttribute（'x'，'10'）；
setAttribute（'y'，'10'）；
var t=document.createTextNode（“这是一个段落”）；
txt.appendChild（t）；
外文.appendChild（txt）；
g、 儿童（外国）；

svg文本节点不能是foreignObject节点的子节点，因此需要一个svg节点。例如

var s=document.getElementById（'t'）；
var g=s.childNodes[1]；
log（g.childNodes[1].remove（））；
var foreign=document.createElements（'http://www.w3.org/2000/svg“外国物体”）；
foreign.setAttribute（'width'，500）；
foreign.setAttribute（'height'，150）；
var svg=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
var txt=document.createElements（'http://www.w3.org/2000/svg","文本",；
setAttribute（'x'，'10'）；
setAttribute（'y'，'30'）；
var t=document.createTextNode（“这是一个段落”）；
txt.appendChild（t）；
外国儿童（svg）；
appendChild（txt）；
g、 儿童（外国）

你好
@JabranSaeed如果要使用foroeignObject插入非svg元素，则：
var s=document.getElementById（'t'）；
var g=s.childNodes[1]；
var foreign=document.createElements
('http://www.w3.org/2000/svg“外国物体”）；
foreign.setAttribute（'width'，500）；
foreign.setAttribute（'height'，500）；
var iDiv=document.createElement（'div'）；
var t=document.createTextNode（“这是一个段落”）；
依附儿童（t）；
外国儿童（iDiv）；
g、 儿童（外国）；
实际上，您的附加子部件正在创建问题
你没有按正确的顺序附加它
检查下面的代码并尝试一下
        var s = document.getElementById('t');
        var g = s.childNodes[1];
        g.childNodes[1].remove();
        var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
        foreign.setAttribute('width', 500);
        foreign.setAttribute('height', 150);
        var t = document.createTextNode("This is a paragraph.");
        foreign.appendChild(t);
        g.appendChild(foreign);

让我知道它是否工作
@JabranSaeed如果您想使用foroeignObject，请遵循此方法
@JabranSaeed if you want to use foroeignObject,beter to follow this method 

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>

    </g>
    </svg>
<script>
  var s = document.getElementById('t');
        var g = s.childNodes[1];

        var foreign = document.createElementNS

('http://www.w3.org/2000/svg',"foreignObject");

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var iDivele = document.createElement('div');
        var ob = document.createTextNode("xxxx");
        iDiv.appendChild(ov);
        foreign.appendChild(iDivele);

        g.appendChild(foreign);
</script>
</body>
</html>

var s=document.getElementById（'t'）；
var g=s.childNodes[1]；
var foreign=document.createElements
('http://www.w3.org/2000/svg“外国物体”）；
foreign.setAttribute（'width'，500）；
foreign.setAttribute（'height'，500）；
var iDivele=document.createElement（'div'）；
var ob=document.createTextNode（“xxxx”）；
依附儿童（ov）；
外国儿童（IDIVEL）；
g、 儿童（外国）；
我也面临同样的问题。除非从chrome/firefox开发者工具中特别编辑（作为HTML），否则foreignObject是隐藏的。看起来它需要某种刷新。@JabranSaeed，Robert Longson是规范的。var foreign=document.createElements（'http://www.w3.org/2000/svg“外国物体”）我没有意识到，但是这里的名称空间对于foreignObject的呈现非常重要。更改代码以使用正确的名称空间解决了一个让我非常沮丧的问题
@JabranSaeed if you want to use foroeignObject,beter to follow this method 

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>

    </g>
    </svg>
<script>
  var s = document.getElementById('t');
        var g = s.childNodes[1];

        var foreign = document.createElementNS

('http://www.w3.org/2000/svg',"foreignObject");

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var iDivele = document.createElement('div');
        var ob = document.createTextNode("xxxx");
        iDiv.appendChild(ov);
        foreign.appendChild(iDivele);

        g.appendChild(foreign);
</script>
</body>
</html>