Add SVG element to existing SVG using DOM

by

If you want to create an HTML element, use document.createElement function. SVG uses namespace, that’s why you have to use document.createElementNS function.

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

This code will produce something like this:

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>

createElement:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

More Related Contents:

  1. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  2. How can I tell if a DOM element is visible in the current viewport?
  3. Parse an HTML string with JS
  4. jQuery document.createElement equivalent?
  5. Browser detection versus feature detection
  6. How can I count text lines inside an DOM element? Can I?
  7. How to show Page Loading div until the page has finished loading?
  8. Retrieving the text of the selected in element
  9. How do I replace text inside a div element?
  10. Dynamically creating HTML elements using Javascript?
  11. What’s standard behavior when element is clicked? Will it submit the form?
  12. Get element at specified position – JavaScript
  13. getAttribute() versus Element object properties?
  14. How to get the HTML for a DOM element in javascript
  15. How to find a parent with a known class in jQuery?
  16. Why aren’t some technically serializable input properties serializable?
  17. Adding images to an HTML document with JavaScript
  18. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  19. D3js take data from an array instead of a file
  20. How to access the content of the “embed” tag in HTML
  21. Add an element to the DOM with JavaScript
  22. Is it possible to append a div inside an SVG element? [duplicate]
  23. How to get the title of HTML page with JavaScript?
  24. JQuery html() vs. innerHTML
  25. Animate marquee on SVG curve
  26. How to properly unload/destroy a VIDEO element
  27. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  28. How to get element by class name
  29. Test if an element can contain text
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment