注入SVG元素并使用jquery访问它

Inject SVG element and access it using jquery

本文关键字：jquery 访问 SVG 元素 注入      更新时间：2023-09-26

我正在图形内容类中动态创建svg元素（一个点），并尝试使用jquery访问点元素，但不起作用。有溶胶吗。？

 /* code for creating svg element */
 $(document).ready(function(){
    var x = 0,
    $y1 = 0;
    $con = $(".graphic-content");
    var $svg = $(svg("svg")).attr({
     "width": "946", "height": "280"
     }).appendTo($con);
   /* create a point */
      $(function() {
         $(svg("circle")).attr({
         "cx": x, "cy": $y1,"r":"3","class":"point"
          }).appendTo($svg);
  });
   /* hover effect*/
 $("circle").hover(function(){
   $(this).css("cursor", "pointer");
   alert("Hello!");
 });
});
function svg(elem) {
       return document.createElementNS("http://www.w3.org/2000/svg", elem);
    }

x和$y1似乎没有定义？尝试使用附加到svg的mouseenter、mouseleave事件，事件委派。正在删除alert()调用；使用.toggleClass() 设置cursor:point

/* code for creating svg element */
 $(document).ready(function() {
   var x = 0,
     $y1 = 0;
   $con = $(".graphic-content");
   var $svg = $(svg("svg")).attr({
     "width": "946",
     "height": "280"
   }).appendTo($con);
   /* create a point */
   $(function() {
     $(svg("circle")).attr({
       "cx": x,
       "cy": $y1,
       "r": "3",
       "class": "point"
     }).appendTo($svg);
   });
   /* hover effect*/
   $("svg").on("mouseenter", "circle", function(e) {
     console.log(e);
     $("body").toggleClass("hovered");
     // alert("Hello!");
   }).on("mouseleave", "circle", function(e) {
     console.log(e);
     $("body").toggleClass("hovered")
   })
 });
 function svg(elem) {
   return document.createElementNS("http://www.w3.org/2000/svg", elem);
 }
.hovered {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="graphic-content"></div>

相关文章：