3

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

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

Step1：将 jpeg 图像添加到 svg Step2：将 rect 和 jpeg 分组 Step3：将 rect 变成蒙版/剪贴蒙版

谢谢大卫

4

1 回答 1

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：iPNG 图像

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

于 2014-11-13T16:20:41.193 回答