Menu
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('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>
445
@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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
