animation and stroke: css, svg and browsers: Part II: gradients and opacity in stroke and fill

Hi folks,

 

I'm always delighted when I can find a web page that makes all five browsers
behave differently, particularly when using only SVG1.1;)

http://cs.sru.edu/~ddailey/svg/cssSVGrotate3.htm

 

First note the picture of these five browsers running concurrently at 

http://cs.sru.edu/~ddailey/svg/StrokeEffects.jpg

 

You will note that Opera and Chrome rather agree. IE and FF rather agree,
though IE clearly doesn't do the SMIL. Safari/Win renders nothing except the
background. 

 

Relative to current discussions this group has been having about bounding
boxes, strokes and their dash-arrays, I think the two questions raised by
these experiments are

1.       should the BBox of the gradient extend to  the 

a.       the entire shape and its stroke?

b.      the outer edge of the shape, with separate values applied to the
stroke (namely to the midpoint of the stroke's width)

c.       the outer edge of the shape, as restricted by the full width of the
stroke (namely, the entire stroke should have color values defined by the
color value of the nearest stop at that particular radius.

Firefox and IE seem to follow approach b). Chrome and Opera seem to follow
approach a). Approach c) might be more reasonable.

2.       When the gradient common to stroke and fill contains transparency
and when the stroke re-enters the filled region (as in a trefoil that is not
a simple closed curve), then should the outer edges of the stroke be visible
as it passes through the interior. Remnants of the stroke remain visible in
FF and IE, though not as much as one might expect if the stroke is given
different values than the shape itself.

 

The illustration at right shows the effect of applying fill-rule="evenodd"
to the top one of two superimposed trefoils, where the one underneath has  a
monochromatic stroke. It is something like what I thought might happen if b)
above were the proper interpretation, though FF and IE that seem to prefer
that seem to treat the stroke different than the shape only when the stroke
lies outside the shape. The animation and dash-array are applied primarily
to make the browsers' treatments more visible.

 

Cheers

David