JavaScript添加的动态svg元素不起作用 [英] dynamic svg element added by Javascript doesn't work
问题描述
我真的很困惑.我有一个静态SVG元素，可以很好地显示，但是当我从Javascript添加相同的元素时，它不会显示.为什么会这样?
I'm really confused here. I have a static SVG element that displays fine, but when I add an identical element from Javascript, it doesn't display. Why is this??
<html>
<head>
<script type="text/javascript">
function doit()
{
var svgdiv = document.getElementById('svg1');
for (var k = 1; k < 3; ++k)
{
var svg = document.createElement('svg');
svg.setAttribute('width',100);
svg.setAttribute('height',100);
console.log(svg);
var c = document.createElement('circle');
c.setAttribute('cx',50);
c.setAttribute('cy',50);
c.setAttribute('r',40);
c.setAttribute('stroke','green');
c.setAttribute('stroke-width',4);
c.setAttribute('fill','yellow');
svg.appendChild(c);
svgdiv.appendChild(svg);
}
}
window.onload = doit;
</script>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<div id="svg1"></div>
</body>
</html>
推荐答案
使用
document.createElementNS('http://www.w3.org/2000/svg', 'svg')
代替
document.createElement('svg')
说明:
SVG元素必须在SVG命名空间中创建，因此不能由createElement创建，而是必须使用提供SVG命名空间的createElementNS作为第一个参数.
SVG elements must be created in the SVG namespace and cannot therefore be created by createElement, instead you must use createElementNS providing the SVG namespace as the first argument.
createElement基本上会创建称为svg和circle的html元素，而不是SVG元素.
createElement basically creates html elements called svg and circle rather than SVG elements.
text/html实际上没有名称空间，因此HTML解析器在遇到<svg>元素时会神奇地切换到SVG名称空间.如果您将mime类型更改为某些XML名称空间，例如 http://www.w3.org/1999/xhtml/，那么您需要根<html>元素和<svg>元素上的xmlns属性.
text/html doesn't really have namespaces so the HTML parser magically switches to the SVG namespace when it encounters an <svg> element. If you changed the mime type to some XML namespace e.g. http://www.w3.org/1999/xhtml/ then you'd need an xmlns attribute on the root <html> element and also on the <svg> element.
<html>
<head>
<script type="text/javascript">
function doit()
{
var svgdiv = document.getElementById('svg1');
for (var k = 1; k < 3; ++k)
{
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width',100);
svg.setAttribute('height',100);
console.log(svg);
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttribute('cx',50);
c.setAttribute('cy',50);
c.setAttribute('r',40);
c.setAttribute('stroke','green');
c.setAttribute('stroke-width',4);
c.setAttribute('fill','yellow');
svg.appendChild(c);
svgdiv.appendChild(svg);
}
}
window.onload = doit;
</script>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<div id="svg1"></div>
</body>
</html>
这篇关于JavaScript添加的动态svg元素不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
