How to insert some elemets after creation SVG?

Question

I already created an SVG, Now my problem is to add a few codes dynamically in between two elements.

How can I achieve it? even JS or jquery no problem!

<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

$(document).ready(function() {
    $(".sid").mouseenter(function() {
      alert("I'm here");
$('#circle2').append('<circle id="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>');  

     });
    $(".sid").mouseleave(function() {
       // action
     });
});

is it possible instead of creating SVG adding few codes inside of elements between?

Expecting output like.

<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle3" cx="250" class="sid" cy="50" r="20" fill="blue"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

score 3 · Answer 1 · answered Sep 28 '18 at 05:44

To create a SVG element, you have to declare the namespace which is http://www.w3.org/2000/svg.

Here's a demo:

$(document).ready(function() {
  $('svg').append(createSVG('circle', {
    id: "circle3",
    cx: 250,
    cy: 50,
    r: 20,
    fill: "blue",
    class: "sid"
  }));
});

function createSVG(tag, attrs) {
  var svg = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var attr in attrs)
    svg.setAttribute(attr, attrs[attr]);
  return svg;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

Or parses it into an XML document and append the documentElement from the XML.

$(document).ready(function() {
  $("svg").append(
    $.parseXML(`<circle xmlns="http://www.w3.org/2000/svg" 
    id="circle3" cx="250" class="sid" 
    cy="50" r="20" fill="blue"/>`).documentElement);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="500" height="500">  
  <circle id="circle1" class="sid" cx="50" cy="50" r="20" fill="red"/>
  <circle id="circle2" class="sid" cx="150" cy="50" r="20"  fill="green"/>
  <circle id="circle4" cx="350" class="sid" cy="50" r="20" fill="yellow"/>  
</svg>

Arif Rathod · Accepted Answer · 2018-09-28T05:40:21.183

2

try this code, i have already checked in your fiddle

   $(document).ready(function() {
   // $(".sid").mouseenter(function() {
      //alert("I'm here");
      var a = document.createElementNS('http://www.w3.org/2000/svg','circle')
      console.log(a)
      a.setAttribute("class", 'sid')
      a.setAttribute("r", 20)
      a.setAttribute("cy", 50)
      a.setAttribute("cx", 250)
      a.setAttribute("fill", "blue")
      a.setAttribute("id", "circle3")
   $('#circle2').after(a); 
   //  });
    $(".sid").mouseleave(function() {
       // action
     });
});

edited Sep 28 '18 at 05:40

answered Sep 28 '18 at 05:02

Arif Rathod

578
2
13

What is querySelector here? can you explain a brief or show me some examples @arif Rathod – Siddhartha esunuri Sep 28 '18 at 05:05
read this article - https://gomakethings.com/how-to-insert-an-element-after-another-one-in-the-dom-with-vanilla-javascript/ you can use your own method to find element. its just for find element in DOM. – Arif Rathod Sep 28 '18 at 05:07
You can use my Jsfiddle @arif Rathod – Siddhartha esunuri Sep 28 '18 at 05:07
check i have updated my code – Arif Rathod Sep 28 '18 at 05:40
That's working ;) – Siddhartha esunuri Sep 28 '18 at 06:26
if its works then please accept my answer. – Arif Rathod Sep 28 '18 at 07:33

How to insert some elemets after creation SVG?

2 Answers2