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

Dirk writes:

>it would be much easier to follow the examples if you could reduce examples
to a minimum. >For many of your points below, the animations don't matter.
Better to link to multiple >files and each one demonstrates one of your
questions/suggestions.

Hi Dirk,

Sure, the animations might help to see some of the subtleties of where
dash-array intersects the shape, but here are a couple of simplified cases:

1. http://cs.sru.edu/~ddailey/GradientStroke1.svg 
2.  http://cs.sru.edu/~ddailey/GradientStroke2.svg 

In 1) all browsers and even old Safari/Win seem to render consistently, but
regardless of how one tries, the gradient (applied to both fill and stroke)
does not bleed beyond the strict edge of the original object's footprint.
Should it? At least in some circumstances?

In 2) Firefox, IE11, and OldOpera (12) do it roughly the same: the gradient
flows through the dash array but the stop color at locus 1.0 is applied to
the most extreme points regardless of whether they are part of the stroke or
not. The appearance in Chrome/Blink, Safari/Win/Webkit and Opera/Blink is
all similar: the most extremal color values appear nowhere, but some of the
interior values of the stroke are visible in parts of the internal gradient
where it has transparency. In both the cases (all six browsers) I would
expect more of the stroke to be visible inside the transparent parts of the
interior, though it is not clear to me how any of the browsers might be
making their calculations, nor what the spec might have to say on these
issues.

I hope this helps

Cheers
David


BTW -- I disagree with ROC, though, that comparing old browsers is
irrelevant. Sometimes, to this very day, only ASV and/or old Opera render
things properly, and there have been dozens of instances in the last four or
five years where Webkit progress in newer versions reflected in Chrome
breaks content that still runs properly in older Safari, so the comparison
is oftentimes valid, even though Old Opera, ASV and Safari/Win are no longer
being maintained -- the older things represent one implementation's reaction
to the SVG spec at one point in time. Sometimes those readings are as valid
as someone else's, particularly about things like whether or not certain
features are important to authors.

On Apr 21, 2014, at 5:22 AM, David Dailey <ddailey@zoominternet.net> wrote:

> 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

Received on Tuesday, 22 April 2014 00:55:33 UTC