![]() ![]() The new code looks like this: // variable for the namespace ![]() We also don’t want to keep typing out the SVG namespace so we assign that to a variable. ![]() The code above won’t show anything as we haven’t styled the rectangle or added it to the SVG document yet. Let newRect = document.createElementNS("", "rect") Creating a rectangle looks like this: // make a simple rectangle We won’t worry about the optional options parameter. That just says, “Hey, we’re creating SVG elements here.” The qualified name is the element we’re creating - rect, text, circle etc. The syntax from the MDN docs reads: var element = document.createElementNS(namespaceURI, qualifiedName) Ĭool, but what does that mean? The namespace is simply “”. To create SVG elements, we need to use the createElementNS() method. I also used a background rectangle so we can see what we’re doing. I’ve manually added it, but you can create and add it via JavaScript as well. Starter infoĪll of the following demos have an empty SVG element in the HTML. In this tutorial, we’ll take a look at creating dynamic SVG elements. In those cases, it is often faster, easier and more flexible to let JavaScript do the heavy lifting for you. But what if you want a whole bunch of repeating shapes? That can be a bit cumbersome.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |