Snap SVG。将矩形转换为图像遮罩并插入图像。

Question

Snap SVG。将矩形转换为图像遮罩并插入图像。

svgsnap.svg

3

请问有什么方法可以将加载的矩形转换成图像的蒙版呢？我希望能够在Illustrator中创建我的svg中的矩形，以便在加载svg之前设置大小和位置。

我认为可以按以下步骤操作：

步骤1：将jpeg图像添加到svg中步骤2：对矩形和jpeg进行分组步骤3：将矩形转换为掩码/剪辑掩码

谢谢 David

- David Jennings

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dennis · Accepted Answer

你要查找的代码是element.attr({mask:maskelement});。

在这种情况下，element是图像元素，可以通过其在页面中的id进行引用。而maskelement则是你的矩形元素。请记住，矩形的颜色会影响遮罩部分的透明度，白色使其完全不透明，黑色使其完全透明。

作为一个简单的例子：

<!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>

记住，在这种情况下，SVG 包含 PNG 和遮罩矩形。PNG 必须具有您在代码中使用的 ID，遮罩矩形也是如此。

编辑：在这里您可以看到之前的 PNG： iPNG image "foo.png"

而 SVG 源代码可以在这里找到。