Description
filter
, mask
, clip-path
, and the proposed extension of fill
and stroke
all support SVG graphical effects applied to CSS layout boxes.
The problem: none of these specs clearly define how the SVG effect-scaling attributes ( objectBoundingBox
versus userSpaceOnUse
for filterUnits
, primitiveUnits
, maskUnits
, maskContentUnits
, clipPathUnits
, gradientUnits
, patternUnits
, and patternContentUnits
) map to the CSS box model.
I think we've got fairly consistent implementations when it comes to objectBoundingBox
effects (but I haven't tested carefully), by mapping it to border-box. This is despite the fact that definitions in masking and filters just link to the SVG spec's definition of bounding box units. And fill & stroke has text trying to get border-box to match stroke-box.
I know we don't have consistency for userSpaceOnUse
effects. Definitions in the spec link to CSS Transforms' definition of the user coordinate system, which has now been updated to be defined as the transform-box
width and height and position, with 1 unit = 1 CSS px. (I haven't tested whether any browsers that implement transform-box
for SVG elements also change how userSpaceOnUse
effects work in SVG. But my guess is no.)
Of course, to make it even more confusing, only Firefox matches the spec definition of userSpaceOnUse
for SVG elements. Everyone is else is broken in a very unhelpful way.
(PS, Sorry for not bringing this up before. It's only as we've been working through FXTF issues that I realized there wasn't already an open issue for something I knew as one of the biggest issues with these specs!)