RE: fancy lines

Actually, we do have a proposal. It is called <replicate>. See some of Israel Eisenberg's examples.

Cheers
David

-----Original Message-----
From: Doug Schepers [mailto:schepers@w3.org] 
Sent: Saturday, January 05, 2013 2:30 PM
To: Brenton Chapin
Cc: www-svg@w3.org
Subject: Re: fancy lines

Hi, Brenton-

On 1/4/13 1:45 AM, Brenton Chapin wrote:
> Greetings list.  I dabble with SVG and am still trying to figure out 
> what it can do.
>
> Stroke-dasharray allows the drawing of many kinds of dashed lines.  Is 
> there any way to draw such things as a double line, tapered line, or a 
> wavy line, with a single use of a path or line element?  The SVG 
> documentation says patterns can be used for strokes, but I haven't 
> been able to get that to work.  There's an example of a pattern used 
> for a fill, but no example for a stroke.

Patterns on strokes in SVG 1.1 don't really do what you'd like them to, just like gradients on strokes; they don't follow the shape of the stroke, but just serve as a static background.

In SVG2, we do plan to provide new ways to stroke shapes, including double lines or stroke-outside-shape, using "vector effects", and maybe to modulate the stroke itself for tapered or wavy lines, though we haven't yet got a solid syntax proposal for that (suggestions welcome).


> Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double line, 
> except tspan only works on text.

You can also play with the <use> element here.


> Meantime, what does work for a double line is drawing a thin line in 
> the background color on top of a thick line.

Yes, the <use> element makes this technique a bit easier [1].

Here's another place where an inverted clip-path would be handy, so it would "cut through" the stroke shape to the underlying background, rather than having to match the background (which is a bit brittle, especially for transparent background). I hope to have that in SVG2.


[1] http://schepers.cc/svg/double-stroke2.svg

Regards-
-Doug

Received on Saturday, 5 January 2013 23:18:51 UTC