我有一个小的SVG代码。我想在SVG代码的两个元素之间添加或添加代码。我尝试使用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
});
});
我该如何实现?是否可以使用jquery或JS?您的答案很有价值。
我期望输出类似
<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>