W3C home > Mailing lists > Public > www-svg@w3.org > July 2011

stroke=gradient for lines or horizontal paths

From: David Dailey <ddailey@zoominternet.net>
Date: Tue, 12 Jul 2011 20:04:34 -0400
To: "'www-svg'" <www-svg@w3.org>
Message-ID: <003401cc40f0$735523b0$59ff6b10$@net>
Hi folks,

 

In the relatively simple file at
http://srufaculty.sru.edu/david.dailey/svg/text/gradientLines.svg (source
code included below), a series of five nearly horizontal lines is drawn
using either <line> or <path> .  In three cases the stroke value is a
pointer to a gradient. In one of those cases, the line is drawn to be just a
tad off of true horizontal.

 

The following browsers fail to properly portray the gradient in the two
cases that a truly horizontal line is stroked by a gradient:

 

Opera 11.5

Firefox 5

IE 9

Chrome

Safari

 

Safari and FF actually draw five lines (the others draw only three), but the
gradients are ignored.

 

Sigh. it looks like ASV passes the test though, so we can't hardly call it
an "acid test" now can we since ASV was born before Hixie?

 

Actually, since so many browsers seem to misfire here, perhaps the spec
should say something like "lines may be stroked by gradients even when they
are horizontal."

 

Cheers

David (whose reason for creating this example may be made clearer by my next
post)

 

--------------source code---------------

 

<svg xmlns="http://www.w3.org/2000/svg" width="100%"

xmlns:xlink="http://www.w3.org/1999/xlink" 

 viewBox="0 0 100 100" preserveAspectRatio="none"

> 

<linearGradient id="g">

<stop offset="0" stop-color="#870"/>

<stop offset=".2" stop-color="#520"/>

<stop offset=".4" stop-color="#000"/>

<stop offset=".6" stop-color="#840"/>

<stop offset=".8" stop-color="#210"/>

<stop offset="1" stop-color="#832"/>

</linearGradient> 

 

 

<line x1="3" x2="97" y1="72" y2="72" stroke-width="4" stroke="url(#g)" />

<line x1="3" x2="97" y1="75" y2="75" stroke-width="4" stroke="red" />

<path d="M 3 78 97 78.01" stroke-width="4" stroke="url(#g)" />

<path d="M 3 81 97 81" stroke-width="4" stroke="red" />

<path d="M 3 84 97 84" stroke-width="4" stroke="url(#g)" />

</svg>

 

 
Received on Wednesday, 13 July 2011 00:05:05 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:48 GMT