SVG에 배경 이미지 추가

Question

Snap.svg를 사용 중이고 다각형에 배경 이미지를 추가하려고합니다.

<svg id="test" height="600" width="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="" class=""></svg> 

var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373); 

나는 배경 이미지를 만들기 위해 여러 가지 방법으로 무리를 시도했지만 그들 중 누구도 작동하지 :

polygon.attr(
{ 
    fill: 'url(http://csshexagon.com/img/meow.jpg)' 
}); 


polygon.attr('xlink:href', 'url(http://csshexagon.com/img/meow.jpg)'); 

어떤 아이디어를 다음과 같이

다각형은? 감사.

Answer 1

몇 가지 조치가 필요합니다. Snap을 사용하는 경우 최신 버전을 사용하고 있는지 확인하십시오. 따라서 'toPattern()'이 작동합니다.

그런 다음 이미지를 그려서 패턴으로 변환 한 다음 다각형을 패턴으로 채울 수 있습니다.

var polygon = paper.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373); 
var img = paper.image('https://i.imgur.com/LQIsf.jpg', 150, 200, 250, 250) 
var p = img.toPattern(0,0,400,400); 
polygon.attr({ fill: p }) 

jsfiddle