使用 jquery 使 svg rect 可点击

【问题标题】：Make svg rect clickable with jquery使用 jquery 使 svg rect 可点击
【发布时间】：2017-05-26 08:46:47
【问题描述】：

我有一个相当简单的 svg 矩形，我需要使用 jquery 使其可点击，但我无法让它工作。我正在使用 Bootstrap，但不认为与它有任何关系。

SVG 元素

<svg id="clickme" width="100%" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="40" fill="#b7b7b7" stroke-width="5"></rect>
  <text x="50%" y="50%" font-family="Verdana" font-size="20" text-anchor="middle" dy=".3em"> text </text>
</svg>

jQuery

$('#clickme').click(function(){
    console.log('NO 1');
});

【问题讨论】：

标签： jquery twitter-bootstrap svg

【解决方案1】：

你导入了 jquery 库？工作正常..

 

$('#clickme').click(function(){
    console.log('NO 1');
});

<style>
    #clickme{width:100px;}
    #clickme:hover{cursor:pointer;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div>
    <svg id="clickme" width="100%" height="40" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="100%" height="40" fill="#b7b7b7" stroke-width="5"></rect>
        <text x="50%" y="50%" font-family="Verdana" font-size="20" text-anchor="middle" dy=".3em"> text </text>
    </svg>
</div>

【讨论】：

我已经导入了它。我无法弄清楚，所以我删除了所有内容并重新开始，现在它可以工作了。所以有一些干扰。