Add SVG element to existing SVG using DOM
I have a HTML construction that resembles the following code:
<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>
I want to be able to add some elements to the SVG defined above using javascript and DOM. How would I accomplish that? I was thinking of
var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>
I am not very familiar with using DOM, or how to create the element to be passed to appendChild so please help me out with this or perhaps show me what other alternatives I have to solve this issue. Thanks a lot.
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
If you're dealing with svg's a lot using JS, I recommend using d3.js. Include it on your page, and do something like this:
d3.select("#svg1").append("circle");
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can I tell if a DOM element is visible in the current viewport?
- How do I check if an element is hidden in jQuery?
- Retrieve the position (X,Y) of an HTML element
- How do I find out which DOM element has the focus?
- What's the difference between using "let" and "var"?
- How to move an element into another element?
- Get selected text from a drop-down list (select box) using jQuery
- Remove element by id
- Scroll to an element with jQuery
Uncaught TypeError: Cannot read property 'setAttribute' of null.newElement.setAttribute()to set attribute as oppose tonewElement.setAttributeNS()- at least in Chrome.