javascript - 如何在创建 SVG 后插入一些元素？-6ren

javascript - 如何在创建 SVG 后插入一些元素？

转载作者：行者123 更新时间：2023-11-30 08:21:42

<分区>

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

我怎样才能实现它？甚至 JS 或 jquery 都没问题!

DEMO

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