W3C home > Mailing lists > Public > public-fx@w3.org > January to March 2011

Re: Jan 10 2011 FXTF telcon cancelled

From: Dirk Schulze <vbs85@gmx.de>
Date: Tue, 11 Jan 2011 15:50:37 +0100
Cc: Erik Dahlstrom <ed@opera.com>, public-fx@w3.org
Message-Id: <66273688-8AA0-424C-B8EF-F4A463EA7800@gmx.de>
To: Dirk Schulze <vbs85@gmx.de>

>>> Also, I saw some discussions about the meaning of stdDeviation and blur radius. It would be great to harmonize all the definitions for CSS shadows, Canvas shadows and feDropShadow.
>> Do you have a pointer to that discussion? I agree that it would be good to see if it's possible harmonize the definitions.

I'm still unsure about the sense of making feDropShadow a new filter effect. The common use case will be something like that:

<filter id="dropShadow">
  <feDropShadow stdDeviation="5" dx="10" dy="10" shadow-color="black" shadow-opacity="0.5"/>

<g filter="url(#dropShadow)">
  <rect width="30" height="30" fill="red"/>
  <circle cx="30" cy="30" r="20"/>
  <text x="40" y="40">SVG Filter</text>

Means just a simple drop shadow and nothing else.

Are there really use cases, where we filter the result of feDropShadow? I guess it will be unlikely.
On the other hand, this implementation still cause the long known confusions for web developer. In many cases the shadow will be clipped because of the hard clipping region of (-10%, -10%, 120%, 120%) of the boundingBox of the target.

For horizontal or vertical lines, nothing will be drawn at all, because 120% of a height of 0 is still zero -> everything gets clipped away.

On WebKit it is really simple to use drop shadows. We have a CSS property called '-webkit-svg-shadow'. The definition is similar to box-shadow:

<g style="-webkit-svg-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);">

This will create a common shadow for all members of <g>. It is still possible to filter the target, because the shadow gets applied after the clipping, masking, filtering of the target.
If you really want to filter the target after the shadow got applied, you can still surround the group with another one:

<g filter="filter">
<g style="-webkit-svg-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);">

The benefits are, that you don't need to think about possible clippings of the shadow, because the shadow won't get clipped.
Theoretically multiple shadows are possible (not yet supported by WebKit), something that is impossible to do just with feDropShadow and still difficult with the other effects. Even horizontal or vertical lines get a shadow (Same for one dimensional figures).

Received on Tuesday, 11 January 2011 14:51:13 UTC

This archive was generated by hypermail 2.3.1 : Monday, 22 June 2015 03:33:45 UTC