Introduction
This chapter demonstrates about the SVG stroke which consist of wide range of stroke properties which are applied to any type of elements following are the concepts covered in this chapter.
- SVG stroke
- SVG Properties
Description
Stroke attribute is used to define the border color to the particular shapes and paths. SVG properties applied to any type of lines, outlines and text of an element. The code below demonstrates the basic stroke property to the lines.
[html]
<!DOCTYPE html>
<html>
<body>
<svg height="80" width="300">
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="blue" d="M5 40 l215 0" />
<path stroke="black" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
SVG have the several stroke properties to stroke the lines, outlines, text of elements, some of the svg properties are listed below.
- stroke linecap
- stroke width
- stroke linejoin
- stroke dasharray
Description
Stroke linecap property is defined as the different types of endings to an open path. The code below demonstrates the stroke line property is used to give stroking to the following lines.
[html]
<!DOCTYPE html>
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="red" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
Stroke linecap property is defined as the different types of endings to an open path. The code below demonstrates the stroke line property which gives stroking to the following lines as shown.
[html]
<!DOCTYPE html>
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="red">
<path stroke-width="2" d="M5 20 l215 0" />
<path stroke-width="4" d="M5 40 l215 0" />
<path stroke-width="6" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
Stroke linejoin is used to demonstrates how the corners look on a path and basic shapes these are defined by three types the figure below demonstrates the stroke line join.
The code below demonstrates the stroke line join as shown.
[html]
<html>
<head>
<style>
contain-demo {
margin: 20px auto;
text-align: center;
}
.grapes {
animation: draw 3s infinite;
}
@keyframes draw {
50% {
stroke-dashoffset: 0;
}
}
.grapes-2 {
animation: shift 3s infinite;
}
@keyframes shift {
50% {
stroke-dashoffset: 200px;
}
}
</style>
</head>
<div class="contain-demo">
<svg width="250px" height="265px" viewBox="0 0 150 165">
<path class="grapes" fill="none" stroke="#765373" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="470" stroke-dashoffset="470"
d=" M115.91,79.58c3.059,1.111,5.927,2.879,8.383,5.334c7.991,7.991,8.806,20.427,2.445,29.329c3.874,0.974,7.546,2.974,10.574,6.001
c8.901,8.901,8.901,23.338,0,32.239c-8.901,8.901-23.338,8.901-32.239,0c-1.323-1.323-2.466-2.784-3.387-4.318
c-0.138,0.159-0.296,0.318-0.455,0.476c-8.901,8.901-23.328,8.891-32.229-0.011c-2.985-2.985-4.975-6.605-5.959-10.425
c-8.922,8.668-23.169,8.584-31.985-0.233c-8.34-8.34-8.859-21.539-1.566-30.482c-4.773-0.646-9.388-2.784-13.071-6.467
c-8.901-8.901-8.901-23.338,0-32.239c3.493-3.493,7.853-5.631,12.383-6.372c2.911-0.476,5.895-0.392,8.774,0.265
c-1.662-7.377,0.381-15.432,6.118-21.168c3.112-3.112,6.89-5.133,10.87-6.065c7.43-1.757,15.569,0.265,21.369,6.065 c2.477,2.477,4.265,5.366,5.345,8.457c0.466-0.572,0.963-1.111,1.482-1.63c8.901-8.901,23.328-8.912,32.229-0.011 C123.573,56.908,123.88,70.636,115.91,79.58z"/>
<g>
<path class="stem" fill="none" stroke="#59351C" stroke-width="5" stroke-linecap="round"
d="M32.464,61.765
c0,0-17.316-1.726-26.967-26.035"/>
<path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
d=" M44.678,4.776c2.953,7.504,5.874,14.828,8.002,22.65c0.73,2.699,1.429,5.79,1.884,9.018c1.715,11.875,0.36,25.571-13.103,28.493
c-0.021,0-0.053,0.011-0.074,0.011c-1.143,0.254-2.265,0.402-3.334,0.476c-3.588,0.243-6.742-0.455-9.251-2.011
c-0.656-0.402-1.27-0.868-1.842-1.397c-0.497-0.455-0.942-0.942-1.355-1.482l-0.011-0.011c-2.053-2.688-3.101-6.403-2.794-11.029
c0.762-11.537,6.065-17.898,15.061-24.354C37.862,25.14,49.42,16.842,44.678,4.776z"/>
</g>
</svg>
<svg width="250px" height="265px" viewBox="0 0 150 165">
<path class="grapes-2" fill="none" stroke="#765373" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="70"
d=" M115.91,79.58c3.059,1.111,5.927,2.879,8.383,5.334c7.991,7.991,8.806,20.427,2.445,29.329c3.874,0.974,7.546,2.974,10.574,6.001
c8.901,8.901,8.901,23.338,0,32.239c-8.901,8.901-23.338,8.901-32.239,0c-1.323-1.323-2.466-2.784-3.387-4.318
c-0.138,0.159-0.296,0.318-0.455,0.476c-8.901,8.901-23.328,8.891-32.229-0.011c-2.985-2.985-4.975-6.605-5.959-10.425
c-8.922,8.668-23.169,8.584-31.985-0.233c-8.34-8.34-8.859-21.539-1.566-30.482c-4.773-0.646-9.388-2.784-13.071-6.467
c-8.901-8.901-8.901-23.338,0-32.239c3.493-3.493,7.853-5.631,12.383-6.372c2.911-0.476,5.895-0.392,8.774,0.265
c-1.662-7.377,0.381-15.432,6.118-21.168c3.112-3.112,6.89-5.133,10.87-6.065c7.43-1.757,15.569,0.265,21.369,6.065 c2.477,2.477,4.265,5.366,5.345,8.457c0.466-0.572,0.963-1.111,1.482-1.63c8.901-8.901,23.328-8.912,32.229-0.011 C123.573,56.908,123.88,70.636,115.91,79.58z"/>
<g>
<path class="stem" fill="none" stroke="#59351C" stroke-width="5" stroke-linecap="round"
d="M32.464,61.765
c0,0-17.316-1.726-26.967-26.035"/>
<path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
d=" M44.678,4.776c2.953,7.504,5.874,14.828,8.002,22.65c0.73,2.699,1.429,5.79,1.884,9.018c1.715,11.875,0.36,25.571-13.103,28.493
c-0.021,0-0.053,0.011-0.074,0.011c-1.143,0.254-2.265,0.402-3.334,0.476c-3.588,0.243-6.742-0.455-9.251-2.011
c-0.656-0.402-1.27-0.868-1.842-1.397c-0.497-0.455-0.942-0.942-1.355-1.482l-0.011-0.011c-2.053-2.688-3.101-6.403-2.794-11.029
c0.762-11.537,6.065-17.898,15.061-24.354C37.862,25.14,49.42,16.842,44.678,4.776z"/>
</g>
</svg>
</div>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Description
Stroke-dash array is used to create the dashed line with stroke for which user need to use the stroke-dash array attribute the as shown in the below code.
[html]
<!DOCTYPE html>
<html>
<body>
<svg height="80" width="300">
<g fill="none" stroke="red" stroke-width="4">
<path stroke-dasharray="5,5" d="M5 20 l215 0" />
<path stroke-dasharray="10,10" d="M5 40 l215 0" />
<path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser then user will get the output as shown below.
Key Points
- stroke property is used to stroke the SVG line,text etc.
- SVG stroke is used as a vector graphic software.
- stroke width is applied on the border of the lines.