Въпреки че съм абсолютно сигурен, че това е нещо, което ми липсва, имам проблем със SVG маските.
Имам SVG на проста икона на катинар (връзка към JSFiddle по-долу), която работеше добре преди, но сега елипсовата част на ключалката не работи. Имам запълване, настроено на черно в маската.
Опитах куп неща, включително промяна на цялата долна част в пътека (не изглеждаше правилно), промяна на маската в пътека на изрязване (противоположно на това, което исках) и дори размяна на елипсата и многоъгълника. Нищо не проработи.
Код:
<svg viewBox="0 0 32 32" version="1.1" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="lock-mask">
<rect x="0" y="0" width="32" height="32" fill="white" />
<ellipse cx="16" cy="19" rx="3" ry="2" fill="black" />
<polygon points="15,20 14,26 18,26 17,20" fill="black" />
</mask>
</defs>
<rect x="2" y="13" width="28" height="16" rx="2" ry="2" mask="url(#lock-mask)" />
<path d="M6.5 14 V 9 A 10 6 0 0 1 25.5 9 V 14 H 22.5 V 9 A 8 5 0 0 0 9.5 9 V 14 Z" />
</svg>
