W3C home > Mailing lists > Public > public-fxtf-archive@w3.org > November 2018

[fxtf-drafts] [filter-effect] The filter region clipping

From: Dirk Schulze via GitHub <sysbot+gh@w3.org>
Date: Sun, 11 Nov 2018 20:02:03 +0000
To: public-fxtf-archive@w3.org
Message-ID: <issues.opened-379557457-1541966522-sysbot+gh@w3.org>
dirkschulze has just created a new issue for https://github.com/w3c/fxtf-drafts:

== [filter-effect] The filter region clipping ==
Moving following issue from @RazrFalcon at https://github.com/w3c/svgwg/issues/587 here:

Hi! I'm writing an SVG rendering library ([resvg](https://github.com/RazrFalcon/resvg)) and since SVG doesn't have a reference implantation, it's often hard to understand what the correct result should be and I'm not sure where can I ask about it. So I'm trying it here with a filters related question.

In the SVG 1.1 Full spec at [15.5 Filter effects region](https://www.w3.org/TR/SVG11/filters.html#FilterEffectsRegion), it states that:

>The bounds of this rectangle act as a hard clipping region

The problem is that I can't understand how exactly it should work. And to make things worst - everyone does this differently:

1. Original

```xml
<svg id="svg1" width="500" height="500" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <rect x="50" y="1" width="100" height="198" fill="none" stroke="black"/>

    <!-- inkscape doesn't support userSpaceOnUse for filter -->
    <filter id="filter1" x="0.185">
        <feGaussianBlur stdDeviation="4" width="100"/>
    </filter>
    <circle id="circle1" cx="100" cy="100" r="80" fill="green" filter="url(#filter1)"/>

    <!-- image frame -->
    <rect id="frame" x="1" y="1" width="198" height="198" fill="none" stroke="black"/>
</svg>
```

2. Chromium r599821

![chrome](https://user-images.githubusercontent.com/725494/48317203-49a47e80-e5f7-11e8-9ba3-19df9dfd44a7.png)

3. Firefox 63.0.1

![firefox](https://user-images.githubusercontent.com/725494/48317211-7062b500-e5f7-11e8-8184-fe45b3346592.png)

4. Inkscape 0.92.2

![ink](https://user-images.githubusercontent.com/725494/48317215-7bb5e080-e5f7-11e8-8721-cdb28b5c2bd6.png)

5. librsvg 2.44.8

![rsvg](https://user-images.githubusercontent.com/725494/48317217-840e1b80-e5f7-11e8-904c-77bd5e88cfa5.png)

6. Batik 1.9

![batik](https://user-images.githubusercontent.com/725494/48317220-8a03fc80-e5f7-11e8-996a-d75b4ac48c8b.png)

And even thought Chrome, librsvg and Batik looks similar they actually have a bit different padding.

What is the correct result?

Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/321 using your GitHub account
Received on Sunday, 11 November 2018 20:02:05 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 20 November 2018 00:46:02 UTC