Question

我已经创建了SVG，现在的问题是在两个元素之间动态添加一些代码。

如何实现？甚至JS或jquery都没问题！

<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
     });
});

是否有可能代替创建SVG在元素之间添加少量代码？

期望输出类似。

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

Answer 1

要创建SVG元素，必须声明名称空间http://www.w3.org/2000/svg。

这是一个演示：

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

或将其解析为XML文档，并从XML中附加documentElement。

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

Answer 2

尝试此代码，我已经检查了您的小提琴

   $(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
     });
});

SVG创建后如何插入一些要素？

2 个答案: