Cairo SVG can't handle masks properly

[aziesemer]

The following SVG stopped working after PR #192. Reverting this chage fixed the issue: https://github.com/Kozea/CairoSVG/pull/192/files#diff-df66f79606a5ca006b57c7ad5b5fc43b

Example: floor.svg.txt

[aziesemer]

Ok, it seems that the problem is related to the mask being applied in the wrong position, possibly due to the x/y coordinates not equal to zero.

I made a small example that reproduces this issue: floor.svg.txt

And the expected and current result:

[aziesemer]

Investigating this issue further... it seems that this bug only happens when the mask is applied without x, y, width and height defined (and also maskContentUnits="userSpaceOnUse"). When I add: x="-100" y="-100" width="200" height="200" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"

It seems to work properly. So the question is: how should we initialize the mask when these values are not available?

On the plus side, it seems that #192 is not responsible directly for this bug, it just enabled a functionality that was not working properly since before.

[aziesemer]

The function with problem seems to be paint_mask in def.py.

@liZe any help on this?

[aziesemer]

Another test case: floor2.svg.txt

Expects:

Got:

[nickhrsn]

👍 👍 👍

Just hit this issue myself, thanks for investigating and documenting your findings.

It's easy enough to modify the source SVG to circumvent this bug, but it's definitely not ideal. Has there been any progress since last year at all?

[guidotheelen]

Also ran into this problem with the following file: https://github.com/googlefonts/noto-emoji/blob/master/svg/emoji_u1f312.svg

[s-weigand]

I have the same problem with cairosvg.__version__ == 2.5.0

Expected: Result:

It looks like the mask is applied to each item instead of the collection as the browser does it.

The SVG source can be found here

[Artemis21]

Very simple test case where masks fail:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3">
  <mask id="mask">
    <circle cx="1.5" cy="1.5" r="0.5" fill="#fff"/>
  </mask>
  <rect x="0" y="0" width="3" height="3" mask="url(#mask)"/>
</svg>

Should render as a black dot on a transparent background, but Cairo renders it as a plain transparent square.