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.

Assoil

You might also be interested in: oreilly.com/catalog/svgess/chapter/ch03.html – Microparasite

Answer 1

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)
  

Microparasite

Your explanation for "stroke-dasharray" though correct for SVG is incorrect for Raphael. As the question is specific to Raphael, you should probably edit your answer. In Raphael, you do not use numbers, as explained below by @user568458. Rather, Raphael expects dashes, dots and/or spaces to produce the different stroke patterns. – Leaky

Answer 2

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"]

Lapful

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.

Basir

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

Snowdrift