gpt4 book ai didi

svg - 捕捉 SVG。将矩形变成图像 mask 并插入图像

转载 作者:行者123 更新时间:2023-12-01 22:37:38 24 4
gpt4 key购买 nike

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

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

第 1 步:将 jpeg 图像添加到 svgStep2:分组rect和jpegStep3:将rect变成蒙版/剪裁蒙版

谢谢大卫

最佳答案

您要查找的代码是 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 和 mask 矩形。 PNG 必须具有您在代码中使用的 ID,屏蔽矩形也是如此。

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

SVG源代码可以在here找到.

关于svg - 捕捉 SVG。将矩形变成图像 mask 并插入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22417637/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com