Mastering dashed lines in SVG is similar to mastering Reverse Polish Notation: initially it makes no sense, but once understood it is really quite simple and straight forward. 4D SVG Dashed Lines - The Basics Part 1 and 4D SVG Dashed Lines - The Basics Part 2 help to begin the understanding process. This Tech Tip expands on them.

The last hurdle to full understanding of SVG dashed lines is the attribute "stroke-dashoffset". A quick inspection of the 4D SVG API will not reveal a command to set this attribute. A very close inspection and read is required of the command SVG_SET_STROKE_DASHARRAY to understand the behavior of "stroke-dashoffset". What is said is that the second argument, "dash", is a "Real" number and with these details:

• The whole value of the dash parameter indicates the length of the first dash of the dotted pattern.


• The decimal value of the dash parameter, if it is not null, indicates the distance into the pattern from which the dashes will start.

There it is, "stroke-dashoffset" is stealthily hidden in the second argument to the command SVG_SET_STROKE_DASHARRAY.

Just what is the role of "stroke-dashoffset" when drawing dashed lines? Look at the image below:



The code below renders the image above:

$Dom_SVG:=SVG_New $Dom_line:=SVG_New_line ($Dom_SVG;10;60;280;60) SVG_SET_STROKE_LINECAP ($Dom_line;"round") SVG_SET_STROKE_WIDTH ($Dom_line;10) SVG_SET_STROKE_DASHARRAY ($Dom_line;10;20;10;20;10;30;3;20;3;20;3;30) $Dom_line:=SVG_New_line ($Dom_SVG;10;80;280;80) SVG_SET_STROKE_LINECAP ($Dom_line;"round") SVG_SET_STROKE_WIDTH ($Dom_line;10) SVG_SET_STROKE_DASHARRAY ($Dom_line;10;20;10;20;10;30;3;20;3;20;3;30)

The desire is not have the lines mirror each other but to alternate. There are two optioins:

• Reorder the values so that it starts with dots instead of dashes.


• Set the "stroke-dashoffset" attribute to start the image at a number of pixels into the image.

Reordering the values is very mistake prone. A better choice is to use the "stroke-dashoffset" attribute. Look at the image below:



Notice that the dots start at about 100 pixels into the image, which makes sense since the values of the first group add up to 100 (10+20+10+20+10+30). The obvious value to enter for the "dash" argument would be "10.100".

But "10.100" will not work! Why? Because the "dash" argument is a real and zeros after the decimal point have to receive special attention. The decimal part of ".100" does not convert to "100 pixels" but "1" pixel. So the choices are "10.99" or "10.101" to set the start offset at 99 pixels or at 101 pixels. If the offset needs to be exactly 100 pixels then using the command SVG_SET_ATTRIBUTES is the way to do it. See snippet below:

SVG_SET_ATTRIBUTES($object;"stroke-dashoffset";"100")

Finally, the dashed line offset to to start with dots is shown below:



The change in the "dash" argument is shown in the code snippet below, notice it is now 10.99:

SVG_SET_STROKE_DASHARRAY ($Dom_line;10.99;20;10;20;10;30;3;20;3;20;3;30)