하이퍼 링크에서 javascript를 사용하여 SVG 패턴 이미지를 동적으로 변경하는 방법

Question

나는 이것을 보았지만 적절한 답을 찾지 못했습니다. 채우기 색상 변경에 대한 답변을 찾았지만 패턴 이미지는 찾지 못했습니다.

Fiddle

JAVASCRIPT

$("a#changePattern").click(function(){ 
var value = $('#pattern');   
value.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://3.bp.blogspot.com/-zX0zs-7rHOM/UJ2halaWKlI/AAAAAAAACXg/2rape7g5Y6c/s320/tiling7small.jpg'); 
}); 

HTML 내가 페이지를 다시로드하지 않고 SVG 이미지에서 여러 패턴을 변경할 수 있어야합니다

<a href='#' id='changePattern'>change pattern</a> 
<svg version="1.1" id="&#x30EC;&#x30A4;&#x30E4;&#x30FC;_1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="105.513px" 
height="80.789px" viewBox="0 0 105.513 80.789" style="enable-background:new 0 0 105.513 80.789;" xml:space="preserve"> 
<defs> 
    <pattern id='pattern' patternUnits='userSpaceOnUse' width='10' height='10'> 
     <image xlink:href='http://3.bp.blogspot.com/--4FM7pgC20Q/UKSCRo5QaII/AAAAAAAACa8/uh8wEsX7naM/s1600/new-tiling-1.jpeg' x='0'y='0'width='10px'height='10px' /> 
    </pattern> 
</defs> 
<polygon style="fill:url(#pattern); stroke:#060001;stroke-width:0.15;" points="64.392,52.845 0.878,79.872 23.175,20.413 104.256,0.818 "/> 
</svg> 

.

이것이 가능합니까?

당신은 (당신이 이미하고있었습니다 생각하지만 jsFiddle에서 가져 오지 않았다) jQuery를 사용하여이 작업을 수행 할 수

Answer 1

:

Link to fiddle

JS 코드

$("#changePattern").click(function(){ 
var value = $('#pattern image'); // select 'image' tag inside element with id 'pattern'   
value.attr('xlink:href', 'http://3.bp.blogspot.com/-zX0zs-7rHOM/UJ2halaWKlI/AAAAAAAACXg/2rape7g5Y6c/s320/tiling7small.jpg'); 
});