[英]add dynamically foreign object in svg using javascript
当我运行此代码时，它向我显示一个空白屏幕但是当我使用chrome中的开发人员工具更新代码时，它会显示数据。 请帮助解释为什么它显示我使用chrome的开发人员工具更新代码的时候，是因为浏览器再次运行DOM，如果是，那么为什么不在第一次显示它时。 这是否由于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>
svg文本节点不能是foreignObject节点的子节点，你需要一个svg节点。 例如
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>
话虽如此，我不明白你为什么要使用foreignObject，除非你要创建一些非svg节点。
让人们兴奋的另一件事是在正确的命名空间中创建元素。 SVG元素需要进入SVG命名空间（ http://www.w3.org/2000/svg ）。
也许重新运行它会迫使Chrome自己创建svg父节点，或者它只是一个Chrome错误。
@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>
@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>
实际上你的附属儿童部分正在创造问题。
你没有按正确的顺序附加它。
检查下面的代码并试一试
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);
让我知道它是否有效
如何使用 javascript 或 jquery 动态添加 SVG 图形？
[英]How can I add a SVG graphic dynamically using javascript or jquery?
如何使用JavaScript循环动态更改SVG对象的颜色？
[英]How to dynamically change the SVG object color using a JavaScript loop?
如何使用javascript从主svg对象动态创建svg视图框？
[英]How can I dynamically create svg viewboxes from a master svg object using javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.