Problem with masks

[pballada]

Hi,
I'm having problems with SVG that contains masks. I thought they were supported. :|

Here is the SVG code, that is causing the issues. Could someone give me a hint how to fix it, or what is causing the problem?

Thanks!

<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <g opacity="0.4"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="20" height="20"> <path d="M19 17H21V15H19V17ZM20 28C15.59 28 12 24.41 12 20C12 15.59 15.59 12 20 12C24.41 12 28 15.59 28 20C28 24.41 24.41 28 20 28ZM20 10C18.6868 10 17.3864 10.2587 16.1732 10.7612C14.9599 11.2638 13.8575 12.0003 12.9289 12.9289C11.0536 14.8043 10 17.3478 10 20C10 22.6522 11.0536 25.1957 12.9289 27.0711C13.8575 27.9997 14.9599 28.7362 16.1732 29.2388C17.3864 29.7413 18.6868 30 20 30C22.6522 30 25.1957 28.9464 27.0711 27.0711C28.9464 25.1957 30 22.6522 30 20C30 18.6868 29.7413 17.3864 29.2388 16.1732C28.7362 14.9599 27.9997 13.8575 27.0711 12.9289C26.1425 12.0003 25.0401 11.2638 23.8268 10.7612C22.6136 10.2587 21.3132 10 20 10ZM19 25H21V19H19V25Z" fill="#9E9E9E"/> </mask> <g mask="url(#mask0)"> <rect width="40" height="40" fill="#757575"/> </g> </g> </svg>

[adamgit]

We had a lot of problems with masks because of bugs in Apple's CALayer APIs. But a few years ago Apple fixed all (most?) of those bugs, and mask code started working fine. All the examples I've seen so far worked OK with Apple's core iOS code. Someone else committed the mask code, so I don't know if there's anything obviously unsupported in your example. I'd check the masking class(es) for "markUnits" and "mask-type" to make sure they are parsing and reacting to your parameters here. If they are, then I'd expect it to work. Try replacing the path with something super-simple and see if that works (e.g. use a simple square made out of 1 polyline). I have a vague memory there were some differences between Apple's interpretation of winding-order, and the SVG interpretation - so if your path is self-intersecting, then it could have problems there.

…

On Mon, 2 Dec 2019 at 15:52, Pau ***@***.***> wrote: Hi, I'm having problems with SVG that contains masks. I thought they were supported. :| Here is the SVG code, that is causing the issues. Could someone give me a hint how to fix it, or what is causing the problem? Thanks! <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns=" http://www.w3.org/2000/svg"> <g opacity="0.4"> <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="10" width="20" height="20"> <path d="M19 17H21V15H19V17ZM20 28C15.59 28 12 24.41 12 20C12 15.59 15.59 12 20 12C24.41 12 28 15.59 28 20C28 24.41 24.41 28 20 28ZM20 10C18.6868 10 17.3864 10.2587 16.1732 10.7612C14.9599 11.2638 13.8575 12.0003 12.9289 12.9289C11.0536 14.8043 10 17.3478 10 20C10 22.6522 11.0536 25.1957 12.9289 27.0711C13.8575 27.9997 14.9599 28.7362 16.1732 29.2388C17.3864 29.7413 18.6868 30 20 30C22.6522 30 25.1957 28.9464 27.0711 27.0711C28.9464 25.1957 30 22.6522 30 20C30 18.6868 29.7413 17.3864 29.2388 16.1732C28.7362 14.9599 27.9997 13.8575 27.0711 12.9289C26.1425 12.0003 25.0401 11.2638 23.8268 10.7612C22.6136 10.2587 21.3132 10 20 10ZM19 25H21V19H19V25Z" fill="#9E9E9E"/> </mask> <g mask="url(#mask0)"> <rect width="40" height="40" fill="#757575"/> </g> </g> </svg> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#661?email_source=notifications&email_token=AACHL6MF3K3NH5MDAG562ULQWUVLHA5CNFSM4JTX5K3KYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4H5JXTLQ>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACHL6MJ72QOFAZEK3UZYVLQWUVLHANCNFSM4JTX5K3A> .

[pballada]

Thanks for the tips!
Will investigate.

[pballada]

As I understood from the code there's no support for "mask" tag yet, but there is for "clipPath".