CODEWITHSUNDEEP
javascripthtmlsvg
Ein2012
Ein2012

Reputation: 1103

"ellipse" element created through JS doesn't appear in html

I'm new to svg. What i'm trying to do is to create an ellipse element with JS and append it to the SVG tag. The HTML code is 

<svg width="640" height="480">
  
<ellipse  cx="200" cy="100" rx="90" ry="60" stroke-width="10" stroke="orange" fill="none" opacity="0.6"/>
  
  <ellipse  cx="200" cy="100" rx="70" ry="40" stroke-width="10" stroke="green" fill="none" opacity="0.6"/>
  
</svg>

Below is the JS code

<script type="text/javascript">

    var el=document.createElement('ellipse');

    $(el).attr("cx",300);
    $(el).attr("cy",200);
    $(el).attr("stroke","red");
    $(el).attr("stroke-width","10");
    $(el).attr("fill","green");
    $(el).attr("rx",120);
    $(el).attr("ry",80);
 
    $("svg").append(el);

</script>

But the ellipse didn't appear on the viewport ,but when i inspect HTML i found the ellipse element that i created is appended to SVG. what makes the difference when created this way & what is the correct approach to dynamically add elements to SVG

FYI see the image below enter image description here

Upvotes: 1

Views: 1044

Answers (1)

Guffa
Guffa

Reputation: 700152

What you have is a custom HTML element instead of an SVG element. Use createElementNS to create the SVG element:

$(function(){

  var el = document.createElementNS("http://www.w3.org/2000/svg", 'ellipse');

  el.setAttribute('cx', 300);
  el.setAttribute('cy', 200);
  el.setAttribute('stroke', "red");
  el.setAttribute('stroke-width', 10);
  el.setAttribute('fill', "green");
  el.setAttribute('rx', 120);
  el.setAttribute('ry', 80);

  $("svg").append(el);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="640" height="480">
  
<ellipse  cx="200" cy="100" rx="90" ry="60" stroke-width="10" stroke="orange" fill="none" opacity="0.6"/>
  
  <ellipse  cx="200" cy="100" rx="70" ry="40" stroke-width="10" stroke="green" fill="none" opacity="0.6"/>
  
</svg>

Upvotes: 4

Related Questions