Hinzufügen eines Hintergrundbildes zu einem SVG

Question

Ich benutze Snap.svg und versuche ein Hintergrundbild zu einem Polygon hinzuzufügen.

Das Polygon ist wie folgt:

<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); 

ich versucht habe, eine Reihe von verschiedenen Möglichkeiten, um das Hintergrundbild zu machen, aber keiner von ihnen arbeiten:

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


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

Irgendwelche Ideen? Vielen Dank.

Answer 1

Es gibt ein paar Bits, die Sie tun müssen. Wenn Sie Snap verwenden, vergewissern Sie sich, dass Sie die neueste Version verwenden, sodass "toPattern()" funktioniert.

Dann können wir das Bild zeichnen, in ein Muster konvertieren und dann das Polygon mit dem Muster füllen.

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