如何使用jQuery或其他JS函数删除或隐藏SVG

时间:2017-12-02 18:06:03

标签: javascript jquery svg

我想创建一个SVG并设置'双击'来删除或隐藏它。使用此代码双击将画布和所有其他SVG隐藏在一起。我是编程新手,我的代码肯定有问题。

 var draw = SVG('output').size(1000, 500);     
      var table = draw.circle(150)
        .fill('red')
        .stroke('black')
        .center(150, 300);

        $("svg").on('dblclick',function(event){
           $(this).hide(); 
        }
        });

我希望在双击它时删除或隐藏svg'表'。

隐藏画布和所有其他SVG

1 个答案:

答案 0 :(得分:0)

您可以将类添加到svg table,以便class query selector使用table.attr("class", "table");

隐藏它

请参阅代码段:



var draw = SVG('output').size(1000, 500);     
      var table = draw.circle(150)
        .fill('red')
        .stroke('black')
        .center(150, 300);
        //add class to table svg
        table.attr("class", "table");

        $("svg").on('dblclick',function(event){
           $(".table").hide(); //hide the table svg by selecting his class
        
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="output"></div>
&#13;
&#13;
&#13;