add dynamically foreign object in svg using javascript

When I run this code it shows me a blank screen but when I update the code using the developer tool in chrome then it shows the data. Please help with some explanation why it shows when I update the code using developer tool of chrome, Is it due to DOM at browser runs again, if yes then why not at 1 first time it shows. Does this happen due to foreignObject.

<!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('',"foreignObject");

            foreign.setAttribute('width', 500);
            foreign.setAttribute('height', 150);
            var txt = document.createElementNS('', '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>

<!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>

Share Improve this question edited Jul 5, 2015 at 21:12 Robert Longson 124k27 gold badges267 silver badges253 bronze badges asked Jul 5, 2015 at 15:15 Pranjal 4631 gold badge7 silver badges21 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 10

@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>

An svg text node cannot be the child of a foreignObject node, you need an svg node in the way. E.g.

        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 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', '10');
        txt.setAttribute('y', '30');
        var t = document.createTextNode("This is a paragraph.");
        txt.appendChild(t);
        foreign.appendChild(svg);
        svg.appendChild(txt);
        g.appendChild(foreign);

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <svg id="t">
    <g>
        <text x="10" y="30">hello</text>
    </g>
    </svg>
</body>
</html>

Having said that, I don't see why you'd want to use foreignObject unless you're going to create some non-svg nodes.

The other thing that trips people up is creating elements in the correct namespace. SVG elements need to go in the SVG namespace(http://www.w3.org/2000/svg).

Perhaps rerunning it forces Chrome to create the svg parent node itself or perhaps it's just a Chrome bug.

@JabranSaeed if you want to use foroeignObject to insert non svg element then:

<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 iDiv = document.createElement('div');
        var t = document.createTextNode("This is a paragraph.");
        iDiv.appendChild(t);
        foreign.appendChild(iDiv);

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

Actually your appending child part is creating the probelm.

you didn't appended it in proper order.

Check the code below and give a try

        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);

let me know if it is working

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

add dynamically foreign object in svg using javascript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)