2017-02-11 3 views
0

jquery 1.11.3을 응용 프로그램에서 사용하고 있지만 jquery 1.11.3이 SVG의 요소에 액세스하지 않는 것 같습니다. 이것이 가능한가. 나는 이유를 알 수 없다.이전 jquery 버전을 SVG 요소에 액세스하는 방법

작동 - 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 라이브러리에서 해결되었으며이를 사용하여 문제를 해결할 수 있습니다.

관련 문제