Snap.svgのマスキングに関するトラブル

Question

Snap.svgを使用してグリフアイコンを作成しようとしています（後でアニメーションされますが、アイコンのみです）。私はそれぞれの顔の特徴のためにパスを輸出してきました

：それは次のようになります。その後、スナップを使用して、私は白い円を作成し、要素に各パスを追加しました：

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' 
}); 

そこから私は3つの顔の特徴をグループ化し、円周上のmask属性として、それらを設定：

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

faceCircle.attr({ 
    mask: maskGroup 
}); 

私はこの時点ですべてが集まることを期待していました。残念ながら、それは次のようになります。

私は顔の外側の円は、私はインスペクタでそれを見つけることができるよう適切な場所にある知っています。それはちょうどマスクされています。私は顔の特徴が外側の円から減算されるところの逆を得る方法を理解できません。

アドバイスがありましたら、本当に助かりました！

Answer 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 });