How Do Maskunits & Maskcontentunits Attributes Affect Mask Positioning?

I've read a bit of the spec for the SVG mask element but the sections on maskUnits and maskContentUnits aren't clear to me, and also how they affect each other isn't clear to me. F

Solution 1:

We know what units are in ordinary life, there are inches, miles, kilometers etc.

One inch is not the same as one kilometre. If you draw a tiny picture, one inch across and you put a frame round it 2 inches across, the picture itself won't change if we make the frame 2 kilometres across. Equally, changing the picture size doesn't change how much is visible inside the picture frame unless the frame is too small for the picture.

maskUnits affect the units of the picture (mask) frame, maskContentUnits affect the units of the picture (mask).

objectBoundingBox units are defined such that 0 is the left side of the masked shape and 1 is the right side.

userSpaceOnUse units use the same co-ordinate system as the masked shape itself. If you mask a rect which extends from 50-100 then your mask ought to cover that area too if you want to mask the entire rect.

If you draw a circle with a radius of 100 kilometres centred 100 kilometres from the origin in both directions, then look at a square 1 millimetre across that starts at the origin, that square will have nothing drawn on it as everything is drawn outside that area.

We're masking

<rectx="0"y="0"width="100"height="100"/>

So our mask's x, y, width and height i.e.

<maskmaskUnits="userSpaceOnUse"x="0"y="0"width="100"height="100"/>

need to cover the same area (or more) if we want to mask that shape and they do.

If we had maskUnits="objectBoundingBox" we'd need

<maskmaskUnits="objectBoundingBox"x="0"y="0"width="1"height="1"/>

Using 100 for the width and height would make the mask 100 times the size it needs to be but other than wasting lots of memory, it has no visible effect.

maskContentUnits work the same for the mask's content i.e.

<rectx="0"y="0"width="100"height="100"fill="white" /><circlecx="50"cy="50"r="25"fill="black" />

Either they need to be 0..1 for objectBoundingBox or 0..100 for the shape. Since they are far too big for objectBoundingBox the mask is all one colour as the shapes are outside the area you can see i.e. the area over the shape.

<!-- mask definitions --><svgviewBox="0 0 100 100"class="hidden"><maskid="usou-usou"maskUnits="userSpaceOnUse"maskContentUnits="userSpaceOnUse"x="0"y="0"width="100"height="100"
  ><rectx="0"y="0"width="100"height="100"fill="white" /><circlecx="50"cy="50"r="25"fill="black" /></mask><maskid="usou-obb"maskUnits="userSpaceOnUse"maskContentUnits="objectBoundingBox"x="0"y="0"width="100"height="100"
  ><rectx="0"y="0"width="1"height="1"fill="white" /><!-- if we wanted the same mask as above it would be r="0.25" --><circlecx=".5"cy=".5"r=".1"fill="black" /></mask><!-- have the mask cover only the top left quarter of the shape --><maskid="obb-usou"maskUnits="objectBoundingBox"maskContentUnits="userSpaceOnUse"x="0"y="0"width="0.5"height="0.5"
  ><rectx="0"y="0"width="100"height="100"fill="white" /><circlecx="50"cy="50"r="25"fill="black" /></mask><!-- have the mask cover only the top left quarter of the shape --><maskid="obb-obb"maskUnits="objectBoundingBox"maskContentUnits="objectBoundingBox"x="0"y="0"width="0.5"height="0.5"
  ><rectx="0"y="0"width="1"height="1"fill="white" /><!-- if we wanted the same mask as above it would be r="0.25" --><circlecx=".5"cy=".5"r=".1"fill="black" /></mask></svg><p>maskUnits = userSpaceOnUse &<br> maskContentUnits = userSpaceOnUse</p><svgviewBox="0 0 100 100"><rectx="0"y="0"width="100"height="100"mask="url(#usou-usou)"
  /></svg><p>maskUnits = userSpaceOnUse &<br> maskContentUnits = objectBoundingBox</p><svgviewBox="0 0 100 100"><rectx="0"y="0"width="100"height="100"mask="url(#usou-obb)"
  /></svg><p>maskUnits = objectBoundingBox &<br> maskContentUnits = userSpaceOnUse</p><svgviewBox="0 0 100 100"><rectx="0"y="0"width="100"height="100"mask="url(#obb-usou)"
  /></svg><p>maskUnits = objectBoundingBox &<br> maskContentUnits = objectBoundingBox</p><svgviewBox="0 0 100 100"><rectx="0"y="0"width="100"height="100"mask="url(#obb-obb)"
  /></svg>