开发者社区> 问答> 正文

网页中的SVG元素无法绑定jQuery事件?

目的

鼠标滑过SVG元素时SVG随机伸缩,后恢复原状(各100ms)

实现代码

<style>
div{
    transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒
    transform-origin: 50% 50%;
    display: inline-block;
}

g.rect_group rect{
    transition: all 0.1s ease;//定义SVG变换时间
}
</style>
<body>
<div>
    <svg height="300" width="300">
        <g class="rect_group" fill="#B9D6E8">//SVG组
            <rect height="100" width="20"/>
            <rect x="25" height="100" width="20"/>
            <rect x="50" height="100" width="20"/>
            <rect x="75" height="100" width="20"/>
            <rect x="100" height="100" width="20"/>
        </g>
      Sorry, your browser does not support inline SVG.
    </svg>
<div>
 <script type="text/javascript">
     $(document).ready(function(){
         var randomHeight=function($ele){
             $ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象
             $ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短
             setTimeout(function(){
                 $ele.attr("height",$ele.data("this_height"));
             },100);//100ms后恢复原状
         }
         $(".rect_group rect").on("mouseover",function(){//注册时间
             randomHeight($(this));
         });
     })
 </script>
</body>

问题

这段代码在本地实现得很好,但搬到服务器上就无法绑定,元素的event listener也为空,求解?

展开
收起
a123456678 2016-03-13 18:09:33 3354 0
1 条回答
写回答
取消 提交回答
  • <style>
    div{
        transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒
        transform-origin: 50% 50%;
        display: inline-block;
    }
    
    g.rect_group rect{
        transition: all 0.1s ease;//定义SVG变换时间
    }
    </style>
    <body>
    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
    <div>
        <svg height="300" width="300">
            <g class="rect_group" fill="#B9D6E8">//SVG组
                <rect height="100" width="20"/>
                <rect x="25" height="100" width="20"/>
                <rect x="50" height="100" width="20"/>
                <rect x="75" height="100" width="20"/>
                <rect x="100" height="100" width="20"/>
            </g>
          Sorry, your browser does not support inline SVG.
        </svg>
    <div>
     <script type="text/javascript">
         $(document).ready(function(){
             var randomHeight=function($ele){
                 $ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象
                 $ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短
                 setTimeout(function(){
                     $ele.attr("height",$ele.data("this_height"));
                 },100);//100ms后恢复原状
             }
             $(".rect_group rect").on("mouseover",function(){//注册时间
                 randomHeight($(this));
             });
         })
     </script>
    </body>
    
    2019-07-17 19:02:57
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
Javascript中的对象 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载