Question

我有一张SVG图，它代表了一个平面图，我试图将鼠标悬停事件附加到SVG代码中g标签的rect集合中。

对于特定的SVG g标签，我有类似的内容：

    <g id="f3s362c12">
      <g>
         <rect x="75.2" y="92.4" fill="none" width="64.7" height="57.8" />
         <polyline fill="none" stroke="#CDDDED" stroke-width="0.5" stroke-miterlimit="10" points="118.4,149.9 140.3,149.9 140.3,92.4 
        75.2,92.4 75.2,128.7        " />
      </g>
      <g>
         <text transform="matrix(1 0 0 1 87.8719 144.8836)" fill="#010101" font-family="'ArialMT'" font-size="13.4182">362.12</text>
  </g>
 </g>

在我的jQuery中，我发现所有以id = f3：

开头的元素

var gElements = $("[id^='f3']");

然后，我从gElements创建了rect元素的集合：

var rectColl = gElements.find('rect');

此时，我认为我可以遍历rectColl集合并附加一个mouseover事件，但是，似乎并非如此：

for (i = 0; i < rectColl.length; i++) {
  $(rectColl[i]).mouseover(function() {
  //$(this).css('background-color', 'yellow');
  alert('hello');
 });
}

知道我误入歧途的地方吗？

JSFiddle

感谢。

道格

Answer 1

您将// ... console.log(jwt.AuthConfig);属性设置为raise ValueError("wrong coin type")。 fill属性的fill值将禁用鼠标事件。你可以将它改为none：

none

到

transparent

或者您可以将<rect x="140.3" y="92.4" fill="none" width="68.8" height="57.8" />添加到rect中，以便使用<rect x="140.3" y="92.4" fill="transparent" width="68.8" height="57.8" /> pointer-events="visible"这样的鼠标事件：

none

fill

<rect x="75.2" y="92.4" pointer-events="visible" fill="none" width="64.7" height="57.8" />

使用jQuery将mouseover事件附加到SVG rect集合

1 个答案: