Menu
I'm trying to draw an SVG rectangle with pure JavaScript. It's not showing up.
But when I run document.getElementById('rect1') in the the browser console, the rectangle element exists. And when I copy and paste the HTML from the console into the HTML file, the rectangle displays properly. So it seems as though the correct code is being added to the document, but the element isn't being displayed.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div>
<svg id="test" width="500" height="500">
<!-- code copied from browser console works
<rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1">
</rect> -->
</svg>
<svg id="main" width="500" height="500"></svg>
</div>
<script src="./src/shapes.js"></script>
</body>
</html>
JavaScript:
function addSvgElement() {
var rect = document.createElement("rect");
rect.setAttribute('x', 30);
rect.setAttribute('y', 60);
rect.setAttribute('width', 50);
rect.setAttribute('height', 80);
rect.setAttribute('style', "stroke:#000000; fill:none;");
rect.id = "rect1";
var svg = document.getElementById('main');
svg.appendChild(rect);
}
addSvgElement(); // adds correct code, but element doesn't show up
712
You can dynamically create curves and paths too, but that’s a bit more involved so I’ll save it for another tutorial. I hope you picked up a few pixels of information about creating dynamic SVG elements. Until next time, keep your pixels movin’.
All of the following demos have an empty SVG element in the HTML. I’ve manually added it, but you can create and add it via JavaScript as well. I also used a background rectangle so we can see what we’re doing.
The Angular CLI will tell you that it's experimental and may change. Place a div within your name.component.html. Place this within your name.component.ts. Place this within your name.component.ts. Place this within your name.component.ts. This method works best if you have a static SVG file that you want to load dynamically.
That just says, “Hey, we’re creating SVG elements here.” The qualified name is the element we’re creating — rect, text, circle etc. We won’t worry about the optional options parameter. Creating a rectangle looks like this:
document.createElement("rect"); will create an unknown HTML DOM element. You have to use the correct namespace to create an SVG DOM element.
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
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
