W3C home > Mailing lists > Public > public-fxtf-archive@w3.org > April 2019

[fxtf-drafts] [filter-effects] Define filter regions for SVG filters applied to HTML elements (#337)

From: Taylor Hunt via GitHub <sysbot+gh@w3.org>
Date: Thu, 11 Apr 2019 19:18:43 +0000
To: public-fxtf-archive@w3.org
Message-ID: <issues.opened-432200159-1555010322-sysbot+gh@w3.org>
tigt has just created a new issue for https://github.com/w3c/fxtf-drafts:

== [filter-effects] Define filter regions for SVG filters applied to HTML elements ==
[Filter Effects Level 1 § Filter Region](https://www.w3.org/TR/filter-effects-1/#filter-region)

## The problem

WebKit ignores `width`/`height`/`x`/`y` on `<filter>` when applied to an HTML element via a CSS reference to that SVG filter. That’s a bit of a mouthful, so hopefully [this CodePen of the issue](https://codepen.io/anon/pen/jRmerV?editors=1100) can demonstrate.

In Firefox and Chrome, the two green rectangles are positioned and sized identically. They differ in Safari.

## What I expect to happen

If `filterUnits="objectBoundingBox"`, the filter region attributes should be relative to the element’s border-box, probably.

If `filterUnits="userSpaceOnUse"`, the filter region attributes should probably map to `px` of the rendered element, with 0,0 as the element’s upper-left corner.

------

(Aside for any Web devs reading this for a solution: Safari’s filter region can be expanded by using a transparent `box-shadow` to extend its paint area. This is probably a hack, though.)






Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/337 using your GitHub account
Received on Thursday, 11 April 2019 19:18:45 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 11 April 2019 19:18:46 UTC