simple object with mask renders incorrectly

[Dean Sellers]

Inkscape 4.8 (on Ubuntu 11.10, and win7) renders a simple object differently to Batik, firefox, and even IE9 which all display the graphic as I expect.

Basically I have a partially hand written .svg file that is part of a larger project that certain elements don't seem to render in Inkscape. The problematic part seems to be a group where one shape is masked by another. The masks in this case are 'reversed' so that a rect at the size of the image is created first and filled white. The mask is a path inside this filled black. Having the effect of cutting the masked path out, there are reasons cuts are inappropriate for this application.

Anyway, this boiled down svg doc shows the issue. The colours are set here so that the base shape, outer mask and inner mask are all visible in the result.

<code>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="200" height="200" id="is_mask_test" version="1.1">
  <defs id="includes">
    <style type="text/css"><![CDATA[
  .seeme {
   fill: black;
  }
  .inmask {
   fill: blue;
  }
  .outmask {
   fill: green;
  }
    ]]></style>
  </defs>
  <g id="masked_rect">
 <mask id="createhole">
  <rect class="inmask" id="maskin" width="100%" height="100%" />
  <rect class="outmask" id="maskout" width="80" height="80" x="60" y="60" />
 </mask>
    <rect class="seeme" id="outsiderect" mask="url(#createhole)" width="180" height="180" x="10" y="10" />
  </g>
</svg>
</code>

I have noticed when trying to work out why my images weren't rendering as expected that after moving objects up/down - in/out of the tree in the svg editor, sometimes they would display as expected. This persists until you reload the image. I know that I am not working with images created in Inkscape, but everything else (including *gag* IE9) renders them as I expect.

[su_v (suv-lp)]

Workaround for Inkscape (0.48.2 and current trunk): use a group as mask containing the two rectangles 'maskin' and 'maskout' (instead of them being direct children of the <mask> object).

[su_v (suv-lp)]

AFAIU this is a duplicate of Bug #794472 in Inkscape: “Incorrect rendering of masked element”
<https://bugs.launchpad.net/inkscape/+bug/794472>

(though I'm not sure about the '%' units used for the 'maskin' and what they actually refer to:
- If attribute ‘maskUnits’ is not specified, then the effect is as if a value of 'objectBoundingBox' were specified.
  <http://www.w3.org/TR/SVG11/masking.html#Masking>
- Inkscape itself only creates masks with 'userSpaceOnUse' as 'maskUnits'
- support for _rendering_ 'objectBoundingBox' as 'maskUnits' in Inkscape seems to be partially implemented)

[su_v (suv-lp)]

Correction: 'maskUnits' is not relevant for the units used for the mask content, and 'maskContentUnits' defaults to 'userSpaceOnUse' if not specified.

Inkscape also fails to consider the second object 'maskout' if defining the mask with 'maskUnits' and 'maskContentUnits' explicitly set to 'userSpaceOnUse', and using corresponding width/height and x/y values. In this case, like with the original example, only putting the two objects inside a group inside the mask seems to render as expected in Inkscape (and like in other SVG viewers like e.g. Squiggle (Batik 1.7)):

  <g id="masked_rect">
    <mask id="createhole" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
      <g>
        <rect class="inmask" id="maskin" width="180" height="180" x="10" y="10" />
        <rect class="outmask" id="maskout" width="80" height="80" x="60" y="60" />
      </g>
    </mask>
    <rect class="seeme" id="outsiderect" mask="url(#createhole)" width="180" height="180" x="10" y="10" />
  </g>

[Dean Sellers (dean-sellers)]

Thanks very much for finding a workaround, I spent a day or so on this and didn't think to group the mask elements. I still think it is a bug in the Inkscape renderer though. The 'mask' element is itself a grouping element according to the spec, so I do think what I had done here should work.

But at this stage this is an easy work around.

[su_v (suv-lp)]

> I still think it is a bug in the Inkscape renderer though.

Yes, AFAIU it is a bug in Inkscape, and the earlier report about the same issue (Bug #794472) has been confirmed as such.

Possibly the problem originates from how masks (and clips) are created in Inkscape (menu 'Object > Mask > Set'): if you have multiple objects selected, the top-most object is used as mask (by default, can be changed to 'bottom-most' in the preferences), and applied as mask to each other object in the selection. If you need a more complex mask made of several objects, you thus need to group it first, before being able to use the group (with several objects inside) as mask, independently of how many objects are masked in one step.

[su_v (suv-lp)]

Proposing to link as duplicate to bug #794472 (I have raised bug importance to 'Medium' there).

[su_v (suv-lp)]

Linking as duplicate to bug #794472 - please add a comment here and revert the duplicate status if you don't agree and think these are different issues.