JavaScript allows for the dynamic addition of foreign objects to an SVG

Question

JavaScript allows for the dynamic addition of foreign objects to an SVG

After running this code initially, it displays a blank screen, but when I make updates using the developer tool in Chrome, the data appears. Can someone provide an explanation as to why this happens? Could it be related to the DOM running again in the browser, and if so, why does it not display correctly the first time? Is there a connection to the presence of 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('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>

javascript svg

Answer 1

Answer №1

@JabranSaeed, if you are looking to incorporate foreign objects into your project, it is recommended to follow this approach:

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

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

        var foreignObject = document.createElementNS

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

        foreignObject.setAttribute('width', 500);
        foreignObject.setAttribute('height',500);
        var innerDiv = document.createElement('div');
        var textNode = document.createTextNode("xxxx");
        innerDiv.appendChild(textNode);
        foreignObject.appendChild(innerDiv);

        group.appendChild(foreignObject);
</script>
</body>
</html>

Answer 2

@JabranSaeed, if you are looking to incorporate foreign objects into your project, it is recommended to follow this approach:

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

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

        var foreignObject = document.createElementNS

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

        foreignObject.setAttribute('width', 500);
        foreignObject.setAttribute('height',500);
        var innerDiv = document.createElement('div');
        var textNode = document.createTextNode("xxxx");
        innerDiv.appendChild(textNode);
        foreignObject.appendChild(innerDiv);

        group.appendChild(foreignObject);
</script>
</body>
</html>

Answer 3

Answer №2

It is important to note that an svg text node cannot be the child of a foreignObject node directly. Instead, you need to create an svg node first and then append the text node as a child of the svg node. Here is an example:

        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>

It is worth mentioning that foreignObject should only be used if you need to create non-svg nodes. Additionally, when creating SVG elements, make sure to place them in the correct namespace, which is http://www.w3.org/2000/svg.

If you are encountering issues, try rerunning the code as sometimes Chrome may handle the creation of the svg parent node differently or it could be a bug in Chrome itself.

Answer 4

It is important to note that an svg text node cannot be the child of a foreignObject node directly. Instead, you need to create an svg node first and then append the text node as a child of the svg node. Here is an example:

        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>

It is worth mentioning that foreignObject should only be used if you need to create non-svg nodes. Additionally, when creating SVG elements, make sure to place them in the correct namespace, which is http://www.w3.org/2000/svg.

If you are encountering issues, try rerunning the code as sometimes Chrome may handle the creation of the svg parent node differently or it could be a bug in Chrome itself.

Answer 5

Answer №3

@JabranSaeed if you are looking to utilize foreignObject for inserting non-SVG elements, you can do so by following these steps:

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

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

        var foreign = document.createElementNS

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

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var innerDiv = document.createElement('div');
        var text = document.createTextNode("This is a paragraph.");
        innerDiv.appendChild(text);
        foreign.appendChild(innerDiv);

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

Answer 6

@JabranSaeed if you are looking to utilize foreignObject for inserting non-SVG elements, you can do so by following these steps:

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

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

        var foreign = document.createElementNS

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

        foreign.setAttribute('width', 500);
        foreign.setAttribute('height',500);
        var innerDiv = document.createElement('div');
        var text = document.createTextNode("This is a paragraph.");
        innerDiv.appendChild(text);
        foreign.appendChild(innerDiv);

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

Answer 7

Answer №4

It seems like the issue lies in the way you are appending the child element.

The order in which you are appending it may not be correct.

Take a look at the revised code snippet below and give it 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);

Please test the updated code and let me know if it resolves the issue.

Answer 8

It seems like the issue lies in the way you are appending the child element.

The order in which you are appending it may not be correct.

Take a look at the revised code snippet below and give it 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);

Please test the updated code and let me know if it resolves the issue.

JavaScript allows for the dynamic addition of foreign objects to an SVG

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Styling a dynamically-injected div using an AJAX request (xhrGet)

Jquery unresponsive in AJAX form output presentation

What is the best way to efficiently handle onChange events for multiple input checkboxes in Reactjs?

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

The play button on the iOS video player will be deactivated automatically after watching 15 videos

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Removing an object from a JSON array based on checkbox selection in Angular 4

Launch the file explorer using JavaScript/HTML

Encountering an issue in a Next.js application while building it, where an error is triggered because the property 'protocol' of 'window.location' cannot be destructured due to being undefined

Grab the webpage's URL by collecting the link from the src attribute of the script tag using XSLT

The view has no access to $scope but the controller does

Transform this JavaScript into Vue 3 code

Send various pieces of information using Jquery/Ajax

Tips on waiting for an event to be processed during a Protractor end-to-end test

The video player will only start playing after the source has been changed if it was already in play

Unable to transmit form information using HTML/JavaScript/Express Node application

altering the value with the click of a button

Incorporate query strings into every hyperlink within the application

Using the React key attribute for components without distinct identifiers

Node.js readline: SyntaxError: Unexpected token =>