Solid and dashed path?

[Dan]

If I'd like to use different stroke styles (i.e. dashed, dotted etc.)
for different parts of an svg path, what is a good approach?

Specifically: Do I need to create separate paths or can I use the
dashArray or other property? (Perhaps a d3 helper?)

This seems to be a good resource:
http://www.carto.net/svg/samples/stroking.shtml#dashArray

Thanks.

[Lars Kotthoff]

> Specifically: Do I need to create separate paths or can I use the
> dashArray or other property? (Perhaps a d3 helper?)

The easiest way is to use separate paths. Then you can use something like
dashArray to set the style for the specific subpath. If you want to do
everything in one path, you could implement a custom function to draw the path
that emulates (through a series of moveto and lineto commands) dashed,
dotted, continuous etc styles. You could do this relatively easily
with d3.scale.*, see e.g. http://www.larsko.org/v/wd/

Lars

[Jason Davies]

On Thu, Nov 10, 2011 at 07:04:31AM -0800, Dan wrote:
> If I'd like to use different stroke styles (i.e. dashed, dotted etc.)
> for different parts of an svg path, what is a good approach?
>
> Specifically: Do I need to create separate paths or can I use the
> dashArray or other property? (Perhaps a d3 helper?)

You can use the "stroke-dasharray" styling property:

http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty

You may indeed need to use separate paths depending on your use case as
these styling properties apply to an entire path at once. There are
other styling properties there that may help e.g. "stroke-dashoffset".

We're also tracking a "segmented lines helper" issue here, but this is
probably more for computing various joins, so you might be fine just
splitting your data and adding a separate path for each segment:

https://github.com/mbostock/d3/issues/122

--
Jason Davies, http://www.jasondavies.com/

[Dan]

Thanks both of you,
Excellent examples and implementations :)

[Johan Sundström]

On Thu, Nov 10, 2011 at 07:18, Jason Davies <ja...@jasondavies.com> wrote:

On Thu, Nov 10, 2011 at 07:04:31AM -0800, Dan wrote:
> If I'd like to use different stroke styles (i.e. dashed, dotted etc.)
> for different parts of an svg path, what is a good approach?
>
> Specifically: Do I need to create separate paths or can I use the
> dashArray or other property? (Perhaps a d3 helper?)

You can use the "stroke-dasharray" styling property:

 http://www.w3.org/TR/SVG/painting.html#StrokeDasharrayProperty

Here's an example I tweaked to do just that a while ago, which animates the stroke-dasharray to paint and erase the outline of a shape as the "cursor" traces its way around it:

  http://bl.ocks.org/1315145

--
 / Johan Sundström, http://ecmanaut.blogspot.com/