CODEWITHSUNDEEP
svgcropmask
extempl
extempl

Reputation: 3137

Strange svg path cropping after applying mask

cropped paths

I have four paths (simplified to straight lines) with stroke=34 for two of which (2, 4) the empty mask (100%x100% filled with white) is applied. Such thing happens with all kind of paths which cropped vertically and horizontally after mask applying.

Can anybody tell me what's going on here and how this cropping can be avoided?

Source SVG file

Thanks.

Upvotes: 2

Views: 343

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60976

This is due to the default for the maskUnits attribute. If you don't specify maskUnits then it defaults to objectBoundingBox, and the x, y, width and height of the <mask> is -10%, -10%, 120%, 120% respectively (if not explicitly set to anything else). This together results in the clipping region that you see.

It seems that you want maskUnits="userSpaceOnUse" judging from the example source. However, note that you may wish to use a <clipPath> instead of a <mask> unless you need to do a gradient fade or otherwise advanced clipping shape. Using <clipPath> (and the corresponding property clip-path) is typically better from a performance standpoint.

Upvotes: 3

Related Questions