2017-02-11 5 views
0

アプリケーションでjquery 1.11.3を使用しているが、jquery 1.11.3はSVGの要素にアクセスしたくないようです。これは可能ですか?なぜ私は理解できません。SVG要素にアクセスするための古いjqueryバージョンの取得方法

に動作します - のjQuery 1.11.3を使用して

-

http://codepen.io/omarel/pen/zNMJOJ

jqueryの3.1を使用して動作しません(更新は、今バージョン1.12.4を使用し、それが動作します)

http://codepen.io/omarel/pen/XpyBOq

更新日: @Rikinのおかげで、私はSVGにクラス名を追加するバージョン1.12.4を使うことができることに気付きました。そして幸いなことに、このバージョンは私が取り組んでいるアプリケーションで動作します。

jQueryの

$(".amenitylink").on("click", function() { 
    $('svg #lobby').toggleClass("highlight"); 
}); 

HTML

<div class="amenitylink">click me</div> 

<svg version="1.1" id="main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="276px" height="210px" viewBox="0 0 276 210" style="enable-background:new 0 0 276 210;" xml:space="preserve"> 
<style type="text/css"> 
<![CDATA[ 
.st0{fill:none;stroke:#FFFFFF;stroke-width:11;stroke-miterlimit:10;} 
]]> 
</style> 
<rect id="lobby" x="13" y="17" class="st0 " width="240" height="179"/> 
</svg> 

CSS v1.11.3上にコメントしたよう

body { 
background-color:#000; 
color:#fff; 
} 
.amenitylink { 
cursor:pointer; 
padding:10px; 
border:1px solid white; 
} 
.highlight { 
    fill:rgba(134, 117, 77, 0.4) !important; 
} 
+1

SVG要素を正しく対象としますが、その内部にclassnameを追加できません。その後、既知の問題であり、jQueryの後のバージョンで修正される可能性があります。 – Rikin

+0

ありがとうございました。これに対する答えはありませんが、私のコメントでは、クラス名を追加したバージョンを参照することができました。私は1.12.4を見つけた、それはまだ私のアプリケーションと互換性があります!ありがとう – obreezy

答えて

1

- それは正しくターゲットSVG要素を行いますが、その中にクラス名を追加することができません。デバッグすると、このようなものが表示されていました。[object SVGsomething] highlight

SVG要素クラスの追加は〜1.12.4ライブラリで解決されました。問題を解決するために使用できます。

関連する問題