Masked Image element (and possibly other elements) translates the mask against the SVG standard.
- Dominant language
- Python
- Stars
- 951
- Forks
- 166
- PR merge metrics
- No merged PRs in 30d
Description
The issue seems to be with how cairosvg interprets the parameters of an Image element with a mask. It seems that when you provide an 'x' and 'y' parameter to the Image element, cairosvg first applies the mask as if both parameters were 0 and then after the mask is applied, translates the result according to the given values of 'x' and 'y'. How I believe it should be interpreted according to the specs (and how Chrome, Inkscape and various other rendering engines interpret it) is that the image is translated and then the mask applied to it afterward without any translation applied to the mask.
Below I will paste a cut down SVG example, [this is a link to the expected rendering](https://i.stack.imgur.com/OfSZ5.png) and [this is a link to how cairosvg renders it](https://i.stack.imgur.com/0ThU3.png). You can see in the cairosvg render that the image is cut off to quarter-size because the image corner is placed at the center of the image when the mask is applied. It is also offset from the expected location because the result is translated after masking.
```svg
```
Note that I first asked this as a [question on StackOverflow](https://stackoverflow.com/questions/73350874/png-export-in-cairosvg-with-masked-image-element-appears-to-violate-svg-standard/) and user Robert Longson [pointed me to this reference](https://www.w3.org/TR/SVG11/masking.html#MaskElementMaskContentUnitsAttribute) which states that the default value of the mask attribute (maskContentUnits) is "userSpaceOnUse" and this indicates:
> the user coordinate system for the contents of the [‘mask’](https://www.w3.org/TR/SVG11/masking.html#MaskElement) element is the current user coordinate system in place at the time when the [‘mask’](https://www.w3.org/TR/SVG11/masking.html#MaskElement) element is referenced (i.e., the user coordinate system for the element referencing the [‘mask’](https://www.w3.org/TR/SVG11/masking.html#MaskElement) element via the [‘mask’](https://www.w3.org/TR/SVG11/masking.html#MaskProperty) property).
This seems to support that the behavior shown by cairosvg in this case is against the standard and it should be noted that explicitly setting the maskContentUnits has no effect on the output from cairosvg (while setting it to "objectBoundingBox" does change the output in other renderers like Chrome and Inkscape).
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by running the supplied SVG example through CairoSVG and compare its output with the linked expected rendering and the linked CairoSVG rendering. Read the SVG masking specification reference, focusing on maskContentUnits and the image's x and y parameters. Done means the example renders with the image translated before masking and explicit maskContentUnits values behave as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100