W3C home > Mailing lists > Public > www-svg@w3.org > January 2013

Re: fancy lines

From: Doug Schepers <schepers@w3.org>
Date: Sat, 05 Jan 2013 14:29:38 -0500
Message-ID: <50E87F22.6050902@w3.org>
To: Brenton Chapin <bzipitidoo@gmail.com>
CC: www-svg@w3.org
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

Received on Saturday, 5 January 2013 19:29:46 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:54:40 UTC