Presentation attributes are CSS properties used as attributes on svg elements to set the color, opacity, stroke color, etc.
The fill is simply the internal color of the element. You can use CSS color names, hex values, rgb values, and hsl values for the fill color (or any color presentation attribute)
<circle fill="orange" />
1
2
3
<circle
cx="250" cy="150" r="100"
fill="orange" />The fill-opacity is the opacity of the fill - a numerical value between 0 and 1.
1
2
3
4
5
6
7
<circle
cx="250"
cy="150"
r="100"
fill="orange"
fill-opacity="0.2"
/>The outline color of the shape or line.
1
2
3
4
5
<circle
cx="250" cy="150" r="100"
fill="orange" fill-opacity="0.2"
stroke="black"
/>The thickness of the stroke. It defaults to “1”.
1
2
3
4
5
6
<circle
cx="250" cy="150" r="100"
fill="orange" fill-opacity="0.2"
stroke="black"
stroke-width="3"
/>The opacity of the stroke - numerical value between 0-1.
1
2
3
4
5
6
<circle
cx="250" cy="150" r="100"
fill="orange" fill-opacity="0.2"
stroke="black" stroke-width="3"
stroke-opacity=".2"
/>Used to create dashed lines. The array defines the dash length and the space length. You can define a series of different dash and space lengths, but the number of values should be even. If it’s not even, the browser simply repeats the array so that it ends up with an even number
1
2
3
4
5
6
7
<circle
cx="250" cy="150" r="100"
fill="orange" fill-opacity="0.2"
stroke="black" stroke-width="3"
stroke-opacity=".2"
stroke-dasharray="10"
/>1
2
3
4
5
6
<circle
cx="250" cy="150" r="100"
fill="orange" fill-opacity="0.2"
stroke="black" stroke-width="3"
stroke-dasharray="40 5"
/>Setting the dashoffset to 25 shifts everything by 25 units, so part of the first dash is hidden, and part of the dash on the right that was “cut off” is revealed.
The pathlength attribute allows you to specify your own unit length for a path. For example, lets draw a circle.
Now lets use stroke-dasharray so that the dash forms a semicircle. You could use math to calculate the circumfereance of the circle, and then set your dasharray accordingly. So for a circle with a radius of 100, the circumfereance is 628, so to make a semicirlce your dasharray would have to be "314 314"
stroke-dasharray="314 314"
Who wants to do all that? It's much easier to set the circle's pathlength to 100, and set the dasharray value to 50
stroke-dasharray="50"
1
2
3
4
5
6
7
8
9
10
<circle
cx="250"
cy="150"
r="100"
fill="none"
stroke="black"
stroke-width="3"
stroke-dasharray="50"
pathLength="100"
/>The stroke-linecap attribute defines the shape of the end of a path.
1
2
3
4
5
6
<path
d="M 50,100 h 400"
stroke="black"
stroke-width="30"
stroke-linecap="butt"
/>All of the lines above are 400 units long. The difference in their actual length is due to the type of linecap.
butt - the stroke does not extend beyond its endpoint.
round - the stroke is extended by a half circle with a diameter equal to the stroke width
square - the stroke is extended by a rectangle with the same height as the stroke width and whose width is half of the stroke width
Defines how lines should look where they are joined together, forming a corner. The default value is “miter”
1
2
3
4
5
6
<path
d="M70 138L247 23L420.5 138"
stroke="black"
stroke-width="40"
stroke-linejoin="miter"
/>