捕捉 SVG。将 rect 变成图像蒙版并插入图像答案

【问题标题】：Snap SVG. Turn rect into an image mask and insert image捕捉 SVG。将 rect 变成图像蒙版并插入图像
【发布时间】：2014-11-14 00:30:33
【问题描述】：

请有人建议我如何将加载的矩形转换为图像的蒙版？我希望能够在 illustrator 中创建我的 svg 的矩形 - 所以在加载 svg 之前设置大小和位置

我认为这可以在以下步骤中起作用。

Step1：将 jpeg 图片添加到 svg Step2：对rect和jpeg进行分组 Step3：将矩形变成蒙版/剪贴蒙版

谢谢大卫

【问题讨论】：

标签： svg snap.svg

【解决方案1】：

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

在这种情况下，element 是图像元素，可参考，例如通过它在页面中的 id。 maskelement 也是你的矩形元素。请记住，矩形的颜色会影响蒙版部分的透明度，白色使其透明为 0%，黑色使其透明为 100%。

举个简单的例子：

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

SVG源代码可以在here找到。

【讨论】：