Strokes, caps, and dashes
SVG shapes have an attribute known as stroke. The attribute stroke specifies the color of a line that outlines an SVG shape. We saw the use of stroke with a line, but it can be used with most of the SVG elements.
Whenever we specify stroke, we usually also specify a stroke width using the stroke-width attribute. This informs SVG about the thickness (in pixels) of the outline that will be rendered.
To demonstrate
stroke and stroke-width attributes, the following example recreates the path from the path example, and sets a stroke to be 10 pixels thick, using red as its color. Additionally, we set the fill of the path to blue. We set all the attributes using the style property of stroke:
<path d="M 10 10 L 210 10 L 110 120 ...
Get D3.js: Cutting-edge Data Visualization now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
