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.
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"]
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…