[svgwg] Issue: Computing filterRegion and primitiveSubregion when referencing the filter from an outsider element — browsers disagree (#1012) marked as Interop

sideshowbarker has just labeled an issue for https://github.com/w3c/svgwg as "Interop":

== Computing filterRegion and primitiveSubregion when referencing the filter from an outsider element — browsers disagree ==
### **What problem are you trying to solve?**

Browsers may disagree when computing `filterRegion` and `filterUnits = "userSpaceOnUse"` and when computing `primitiveSubregion` and `primitiveUnits="userSpaceOnUse"`. The disagreement happens when the referencing element is an outsider element (i.e. an element which is not descendant to the same SVG root of the referenced SVG filter).

Consider this example:
```
<svg width="0" height="0" style="position: absolute;">
    <filter id="filter" primitiveUnits="userSpaceOnUse">
        <feFlood flood-color="green" width="100%" height="100%" />
    </filter>
</svg>
<svg width="300" height="300">
    <rect x="10" y="10" width="100" height="100" filter="url(#filter)" />
</svg>
<div style="width: 100px; height: 100px; filter: url(#filter);"></div>
```
The spec is not clear on how the `width="100%"` and `height="100%"` are resolved in this case. The boundingBox of the referenced SVG is an empty rectangle.

### **What solutions exist today?**

It seems the browsers adopt one of these solutions is used to resolve the percentage lengths:

-  The boundingBox of the referenced SVG
- The boundingBox of the referencing SVG if the referencing element is an `SVGElement`.
- The boundingBox of the target element if the referencing element is an `HtMLElement`

### **How would you solve it?**

The boundingBox of the target element is used to resolve the percentage lengths. This is guaranteed not be empty rectangle.

This can be implemented by always using  `filterUnits = "objectBoundingBox"` and `primitiveUnits="objectBoundingBox"` when resolving `filterRegion` and `primitiveSubregion` for an outsider element.

### **Anything else?**

The browsers disagree when rendering this test case:

[svg-filter-external-references.html](https://github.com/user-attachments/files/22372517/svg-filter-external-references.html)

See https://github.com/w3c/svgwg/issues/1012


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 18 September 2025 03:43:16 UTC