Question

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

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

步骤1：将jpeg图像添加到svg 第2步：分组rect和jpeg 第3步：将rect转入蒙版/剪贴蒙版

由于大卫

Answer 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 image "foo.png"

可以找到SVG源代码here。

Snap SVG。将rect转换为图像蒙版并插入图像

1 个答案: