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