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 sente

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