Place an Image inside a Polygon with Snap.svg

Question

I have a polygon (in fact it's a hexagon) painted with Adobe's Snap.svg:

var s = Snap('#test');

var hexagon = s.paper.polygon([
            0, 50,
            50, 0,
            100, 0,
            150, 50,
            100, 100,
            50, 100,
            0, 50
]);

hexagon.attr({
            stroke: '#fff',
            strokeWidth: 1
});

Instead of filling the polygon with some paint, I want to place an image inside of it. The only thing I have found in the docs is the image function, but I don't know how to insert it. Anyone any idea?

======

Final Solution:

var image = s.paper.image('http://placekitten.com/g/200/300', 0, 0, 150, 150);
image = image.pattern(0, 0, 150, 150);
...
hexagon.attr({
            stroke: '#fff',
            strokeWidth: 1,
            fill: image
        });

Answer 1

You can't directly fill an element with an image you have to go via a pattern.

What this means is that you need to create a pattern that contains an image and then fill the shape with the pattern.