「子供の学習センター」の色の一部に

Question

https://codepen.io/jriggs/pen/YVPvwv

クリックすると、期待通りに動作しますが、テキストをクリックすると、文字のパスオブジェクトを返しSVGに最も近いポリゴンを見つけ、私はテキスト

が含まれているポリゴンを取得したいです

問題は、ポリゴンの上にテキストの形があるため、クリックするとポリゴンが選択されないためです。クリックすると

私はsvgのためのgetParerentのようなものが必要です。なしの成功とZインデックスのプロパティをいじり

$(this).closest('polygon') 

も：

必要であれば、私はまた私がセレクタとしてのポリゴンを使用しようとした、とも最も近いjQuerysているSVGコードを編集することができます。このファイルはデザイナーから私に渡されました。オプションであるかもしれないもっとjQueryのフレンドリーな形式でエクスポートする方法があれば。画像そのものは、多くの図形とレイヤーを持つフロアプランです。

Answer 1

クリックした要素をSVGでターゲットに設定する場合は...
イベントターゲットを使用する必要があります。

私はあなたがしたいのか分からないが...
は、だから、僕はellemet classとtagnameをクリックCONSOLE.LOG。
視覚的に明瞭にするために、fillの色をシアン色に変更します。

これを参照してくださいCodePen。

$(document).ready(function() { 
    $("#Layer_1").click(function (e) { 

    var eventTarget = $(e.target); 

    var clickedClass = eventTarget.attr("class"); 
    var clickedTagname = eventTarget[0].tagName; 

    console.log("\nA click occured on: " + clickedClass) 
    console.log("Which is a: " +clickedTagname); 

    // Action if target is not a paths (assuming those are all letters) and is not text 
    if(clickedTagname != "path" && clickedTagname != "text" ){ 
     eventTarget.css({"fill":"cyan"}); 
    } 

    }); 
});