jQueryを使用してSVG rectコレクションにmouseoverイベントを添付する

Question

私は、フロアプランを表すSVG図面を持っており、SVGコードのgタグ内にマウスオーバーイベントをrectコレクションに添付しようとしています。特定のSVGグラムタグの

、私はこのようなものがあります、そして、

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

：

<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で始まるすべての要素を見つけています私はgElementsから矩形要素のコレクションを作成します。

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

この時点で、私は私が反復することができると考えました

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

私は迷っつもりどこの任意のアイデア：rectCollコレクションを通って、mouseoverイベントを添付し、しかし、これはそうであるようには見えませんか？

JSFiddle

感謝。

ダグ

Answer 1

あなたはnoneに設定fill属性を持っています。 fill属性の値はnoneで、マウスイベントは無効になります。あなたはtransparentにそれをcange：

<rect x="140.3" y="92.4" fill="none" width="68.8" height="57.8" /> 

<rect x="140.3" y="92.4" fill="transparent" width="68.8" height="57.8" /> 

か、このようなnonefillでマウスイベントを持つためにRECTへpointer-events="visible"を追加することができますする：

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

jQuery(function($){ 
 
    $("[id^='f3'] rect").on('mousemove', function() { 
 
     console.log('mousemove'); 
 
    }); 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
 

 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> 
 
    <g id="background"> 
 
     <rect x="1.5" y="0.3" fill="#5A8CC9" width="298.7" height="300.4" /> 
 
    </g> 
 
    <g id="f3s362c12"> 
 
     <g> 
 
     <rect x="75.2" y="92.4" pointer-events="visible" 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> 
 
    <g id="f3s362c11"> 
 
     <g> 
 
     <rect x="75.2" y="149.9" fill="transparent" width="64.7" height="57.8" /> 
 
     <polyline fill="none" stroke="#CDDDED" stroke-width="0.5" stroke-miterlimit="10" points="118.4,207.8 140.3,207.8 140.3,149.9 
 
      75.2,149.9 75.2,186.2  " /> 
 
     </g> 
 
     <g> 
 
     <text transform="matrix(1 0 0 1 87.8719 201.6532)" fill="#010101" font-family="'ArialMT'" font-size="13.4182">362.11</text> 
 
     </g> 
 
    </g> 
 
    <g id="f3s362c2"> 
 
     <g> 
 
     <rect x="140.3" y="149.9" fill="none" width="68.8" height="57.8" /> 
 
     <polyline fill="none" stroke="#CDDDED" stroke-width="0.5" stroke-miterlimit="10" points="208.7,183.5 208.7,149.9 140.3,149.9 
 
      140.3,207.8 185.8,207.8   " /> 
 
     </g> 
 
     <g> 
 
     <text transform="matrix(1 0 0 1 163.782 201.6532)" fill="#010101" font-family="'ArialMT'" font-size="13.4182">362.2</text> 
 
     </g> 
 
    </g> 
 
    <g id="f3s362c1"> 
 
     <g> 
 
     <rect x="140.3" y="92.4" fill="none" width="68.8" height="57.8" /> 
 
     <polyline fill="none" stroke="#CDDDED" stroke-width="0.5" stroke-miterlimit="10" points="208.7,126 208.7,92.4 140.3,92.4 
 
      140.3,149.9 185.8,149.9   " /> 
 
     </g> 
 
     <g> 
 
     <text transform="matrix(1 0 0 1 163.782 144.8836)" fill="#010101" font-family="'ArialMT'" font-size="13.4182">362.1</text> 
 
     </g> 
 
    </g> 
 
    </svg>