Snap SVG. Turn rect into an image mask and insert image

Question

The code that you look for is element.attr({mask:maskelement});.

In this case, element is the image element, referable e.g. by its id in the page. As is maskelement the element that would be your rectangle. Keep in mind that the color of the rectangle has influence on the transparency of the masked part, white making it 0% transparent, black making it 100% transparent.

As a simple example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Snap test</title>
    <script src="snap/snap.svg.js"></script>
    <script>
        window.onload = function () {
            var s = Snap(800, 600);

            Snap.load("myexample.svg", function (f) {
                var element = f.select("#myimage");
                var maskelement = f.select("#mymask");
                element.attr({mask:maskelement});

                g = f.select("svg");
                s.append(g);
            });
        };
    </script>
</head>
</html>

Keep in mind that the SVG in this case contains the PNG and the masking rectangle. The PNG must have the id that you use in your code, as does the masking rectangle.

Edit: here you see the previous PNG: iPNG image "foo.png"

And the SVG sourcecode can be found here.