Menu
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>
834
SVG works together with HTML, CSS and JavaScript.
Contrary to the rules in CSS 2.1, the z-index property applies to all SVG elements regardless of the value of the position property, with one exception: as for boxes in CSS 2.1, outer 'svg' elements must be positioned for z-index to apply to them.
Since the aspect ratio of the SVG must be maintained (otherwise the SVG would overflow off the page upon resizing) the vertical portions of the SVG must grow as the horizontal portions shrink. In path speak, each v must be dynamic while each h and a can be fixed.
The SVG DOM builds upon and is compatible with DOM Level 2. In particular: The SVG DOM requires complete support for DOM Level 2 Core [DOM2] Wherever appropriate, the SVG DOM is modeled after and maintains consistency with the Document Object Model HTML ([DOM1], chapter 2).
Use
document.createElementNS('http://www.w3.org/2000/svg', 'svg')
instead of
document.createElement('svg')
Explanation:
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 basically creates html elements called svg and circle rather than SVG elements.
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>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
