Snap.svg 中的遮罩问题答案

【问题标题】：Troubles with masking in Snap.svgSnap.svg 中的遮罩问题
【发布时间】：2017-01-17 22:05:46
【问题描述】：

我正在尝试使用Snap.svg 创建一个字形图标（稍后将进行动画处理，但现在只是图标）。它应该是这样的：

我已经导出了每个面部特征的路径。然后，使用 Snap，我创建了一个白色圆圈并将每个路径添加到元素：

var snapFace = Snap('#face');

var faceCircle = snapFace.circle(17.075, 17.075, 17.075);
faceCircle.attr({
  fill: '#fff'
});

var faceLeftEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceLeftEye.attr({
  transform: 'translate(-23.08, -22.81)',
  fill: '#fff'
});

var faceRightEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceRightEye.attr({
  transform: 'translate(-11.08, -22.81)',
  fill: '#fff'
});

var faceMouth = snapFace.path('M40.2511192,53.2459206 C33.6627589,53.2459206 28.3195327,49.6857932 28.2884233,41.3393734 L52.208883,41.3393734 C52.183085,49.6857932 46.8387207,53.2459206 40.2511192,53.2459206 L40.2511192,53.2459206 Z');
faceMouth.attr({
  transform: 'translate(-23.08,-22.81)',
  fill: '#fff'
});

从那里我将三个面部特征分组并将它们设置为圆圈上的mask 属性：

var maskGroup = snapFace.group(faceLeftEye, faceRightEye, faceMouth);

faceCircle.attr({
  mask: maskGroup
});

我希望在这一点上一切都在一起。不幸的是，它看起来像这样：

我知道脸部的外圈在正确的位置，因为我可以在检查器中找到它；它只是被掩盖了。我不知道如何使相反的情况发生，即面部特征从外圈中减去。

如果有人有建议，我将非常感谢您的帮助！

【问题讨论】：

标签： javascript svg mask snap.svg

【解决方案1】：

我应该看起来更努力。在这里找到了答案：An SVG rectangle with multiple holes using Snap.svg——特别是这个Pen。

基本上，我必须在蒙版上添加一个额外的圆圈，使用白色填充，然后将面部特征填充设置为黑色。

var snapFace = Snap('#face');

var faceCircle = snapFace.circle(17.075, 17.075, 17.075);
faceCircle.attr({ fill: '#fff' });

var maskGroup = snapFace.group();
maskGroup.circle(17.075, 17.075, 17.075).attr({ fill: '#fff' });

var faceLeftEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceLeftEye.attr({ transform: 'translate(-23.08, -22.81)', fill: '#000' });
maskGroup.append(faceLeftEye);

var faceRightEye = snapFace.path('M34.4302501,33.1788512 C35.6480686,33.1788512 36.6363606,34.1675226 36.6363606,35.3819266 C36.6363606,36.6008833 35.6480686,37.5876578 34.4302501,37.5876578 C33.2162254,37.5876578 32.2313479,36.6008833 32.2313479,35.3819266 C32.2313479,34.1679019 33.2162254,33.1788512 34.4302501,33.1788512 L34.4302501,33.1788512 Z');
faceRightEye.attr({ transform: 'translate(-11.08, -22.81)', fill: '#000' });
maskGroup.append(faceRightEye);

var faceMouth = snapFace.path('M40.2511192,53.2459206 C33.6627589,53.2459206 28.3195327,49.6857932 28.2884233,41.3393734 L52.208883,41.3393734 C52.183085,49.6857932 46.8387207,53.2459206 40.2511192,53.2459206 L40.2511192,53.2459206 Z');
faceMouth.attr({ transform: 'translate(-23.08,-22.81)', fill: '#000' });
maskGroup.append(faceMouth);

faceCircle.attr({ mask: maskGroup });

【讨论】：