[英]Troubles with masking in Snap.svg
I'm trying to use Snap.svg to create a glyph icon (it will be animated later, but for now just the icon). 我正在尝试使用Snap.svg创建一个字形图标(稍后将对其进行动画处理,但现在仅是该图标)。 It should look like this:
它看起来应该像这样:
I've exported the paths for each facial feature. 我已经导出了每个面部特征的路径。 Then, using Snap, I've created a white circle and added each path to the element:
然后,使用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'
});
From there I grouped the three facial features and set them as the mask
attribute on the circle: 从那里,我将三个面部特征分组,并将它们设置为圆上的
mask
属性:
var maskGroup = snapFace.group(faceLeftEye, faceRightEye, faceMouth);
faceCircle.attr({
mask: maskGroup
});
I expected at this point for everything to come together. 我希望在这一点上一切都可以在一起。 Unfortunately it looks like this:
不幸的是,它看起来像这样:
I know the face's outer circle is in the right place as I can find it in the inspector; 我知道面部的外圆在正确的位置,因为我可以在检查器中找到它。 it's just masked.
它只是被掩盖了。 I can't figure out how to get the inverse to happen, where the facial features subtract from the outer circle.
我不知道如何使逆特征发生,即面部特征从外圆中减去。
If anyone has advice I'd really appreciate the help! 如果有人提出建议,我将非常感谢您的帮助!
I should've looked harder. 我应该更努力了 Found the answer here: An SVG rectangle with multiple holes using Snap.svg -- specifically this Pen .
在这里找到了答案: 使用Snap.svg的SVG矩形具有多个孔 -特别是此Pen 。
Basically I had to add an additional circle to the mask, with a white fill, then set the facial feature fills to black. 基本上,我必须在蒙版上添加一个额外的圆圈,并用白色填充,然后将面部特征填充设置为黑色。
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 });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.