通过JS创建的“ellipse”元素不会出现在html中

Question

我是svg的新手。我要做的是用JS创建一个椭圆元素并将其附加到SVG标记。 HTML代码是

<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>  

以下是JS代码

<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> 

但是椭圆没有出现在视口上，但是当我检查HTML时，我发现我创建的椭圆元素被附加到SVG。以这种方式创造的差异是什么？动态添加元素到SVG的正确方法是什么

仅供参考，如下图所示

Answer 1

您拥有的是自定义HTML元素而不是SVG元素。使用createElementNS创建SVG元素：

$(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>