how to use attr's stroke-dasharray,stroke-linecap,stroke-linejoin in raphaeljs

Question

Can anyone give me an example of these attributes in action: stroke-dasharray, stroke-linecap, stroke-linejoin i tried using them, but i don't quite understand the sentext structure for their values.

Answer 1

Phrogz's answer is great for plain SVG, but this question is also tagged Raphael, where things are similar, but slightly different. There aren't many good examples of stroke settings in Raphael, so here's a complete live demonstration.

It has examples documenting how to use stroke-dasharray (dotted lines and dashed lines), stroke-linejoin (stroke corner style) and stroke-linecap (path stroke cap style) in Raphael.js.

Link to jsfiddle live demo

---

Use .attr({'stroke-dasharray': option}) for dotted / dashed lines in Raphael, with one of these options (no numbers, unlike pure SVG):

["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

---

Use .attr({'stroke-linejoin': option}) for rounded, bevelled or sharp (mitre) corners in Raphael (same as SVG except inherit):

["bevel", "round", "miter"]

You can also set .attr({'stroke-miterlimit': decimal}) which controls the cut-off point based on the stroke width and the angle beyond which miter (sharp) joins are blunted. Same as SVG stroke-miterlimit so SVG docs apply. Cross-browser variation in this can be seen in the jsfiddle above (e.g. between Chrome & Firefox on Windows)

---

Use .attr({'stroke-linecap': option}) to control the caps on the end of a stroked raphael path:

["butt", "square", "round"]

Answer 2

stroke-linecap

• Legal Values: butt | round | square | inherit
• Example
  

---

stroke-linejoin

• Legal Values: miter | round | bevel | inherit
• Example
  

---

stroke-dasharray

• Legal Values: comma- or space-delimited list of lengths or percentages,
  e.g. "100 20 0 20"
• Example (using above values)
  

Answer 3

Please note that this answer covers only stroke-dasharray and is a supplement to answer by Phrogz.
Raphael does not provide a lot of freedom to set stroke-dasharray as stated by user568458 and as I needed it to work like other svg creators I did a little tweak in raphael.js to accommodate all possible stroke-dasharray values.

addDashes = function (o, value, params) {
        var nvalue = dasharray[Str(value).toLowerCase()];
        if (nvalue!==undefined) {
            var width = o.attrs["stroke-width"] || "1",
                butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                dashes = [],
                i = nvalue.length;
            while (i--) {
                dashes[i] = nvalue[i] * width + ((i % 2) ? 1 : -1) * butt;
            }
            $(o.node, {"stroke-dasharray": dashes.join(",")});
        }else{
            $(o.node, {"stroke-dasharray": Str(value).toLowerCase()});
        }
    }

Replacing the previous code in the file just below where dasharray object is defined.

Answer 4

If you want to apply a dashed line in a standard SVG way on a Raphael line object, this worked well for me; whereas I didn't have any luck using period and hyphens as done in the Raphael way.

myLine.attr({stroke:'green'}).node.setAttribute('stroke-dasharray', '10,10');

The parameters (10,10 in this example) are the length,gap and you can iterate that as much as you want. Like 5, 5, 1, 5 would be shorter dashes with dots.

Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray