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 19:29:46 UTC