0

I'm trying to create a dashed pattern with 16px of path and then a 14px gap. I've tried using:

stroke-dasharray: 16px 14px;

which works on my <line> element but doesn't seem to do anything on my <path> element.

Here's a fiddle to play with: http://jsfiddle.net/Wexcode/avTY6/

Wex
  • 15,539
  • 10
  • 64
  • 107

2 Answers2

2

You've got two arcs over the top of each other slightly offset. In addition paths are filled by default with black (lines don't use fill). This seems to be about what you want

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
0

I'm not an expert, but it seems that you can't have any combination of values for this path (maybe because combination of this values overlaps around the circle so it looks like it is single line).
If you try with 12px 10px, it works, but again, if you try with 14px 10px (both whole values) - it doesn't work.

Goran
  • 383
  • 4
  • 12
  • It doesn't have to be an integer, it has something with a combination of two values. It is interesting that if you switch values (14 16 instead of 16 14 - it works...). It must be that path overlaps the gap. – Goran Jul 21 '12 at 17:48
  • Well, the order specifies the lengths of alternating dashes and gaps; I need to have control of those lengths. – Wex Jul 21 '12 at 17:49