SVG Stroke

stroke are used to defined the color of svg elements outline shape(border). stroke are provide wide range of attributes. there are given in tables.

stroke stroke-width stroke-linecap
stroke-dasharray stroke-linejoin stroke-opacity

Stroke

help of stroke we can change outline color of SVG shapes or text.

Demo 1

SVG text stroke Example Hello SVG!
<svg height="80" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <text x="10" y="50" font-size="40px"     font-family="monospace" stroke="slateblue" fill="none">Hello SVG!</text>
</svg>

Demo 2

SVG text circle Example
<svg height="170" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <circle cx="80" cy="80" r="70" stroke="blue" fill="none"></circle>
  <circle cx="80" cy="80" r="43" stroke="green" fill="none"></circle>
   <circle cx="80" cy="80" r="20" stroke="pink" fill="none"></circle>
</svg>

stroke-width

change width of shape outline.

Example

SVG line stroke width Example
<svg height="150" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <line x1="10" y1="10" x2="10" y2="100" stroke="gray" stroke-width="1px">  </line>
   <line x1="30" y1="10" x2="30" y2="100" stroke="green" stroke-width="3px">  </line>
     <line x1="50" y1="10" x2="50" y2="100" stroke="#00bcd4" stroke-width="5px">  </line>
   <line x1="70" y1="10" x2="70" y2="100" stroke="darkcyan" stroke-width="10px">  </line>
     <line x1="100" y1="10" x2="100" y2="100" stroke="#9c27b0" stroke-width="20px">  </line>
</svg>

Stroke width Animation example

SVG stroke width Example
<svg height="260" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <line x1="150" y1="50" x2="100" y2="150" stroke="gray" stroke-width="10px">     <animate attributeName="stroke-width" from="0" to="100" begin="1s" dur="8s"  repeatCount="indefinite"></animate></line>
  <circle cx="80" cy="80" r="5" stroke="forestgreen" fill="pink" stroke-width="1">
     <animate attributeName="stroke-width" from="0" to="100" begin="1s" dur="8s"  repeatCount="indefinite"></animate>
  </circle>
</svg>

SVG stroke-dasharray

SVG stroke dasharray Example
<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle stroke-dasharray="1 1" cx="160" cy="90"  r="80" stroke="blue" stroke-width="2" fill="none"></circle>
  <circle stroke-dasharray="2 3" cx="160" cy="90"  r="70" stroke="#ff5722" stroke-width="5.8" fill="none"></circle>
    <circle stroke-dasharray="50" cx="160" cy="90"  r="30" stroke="#8bc34a" stroke-width="5.8" fill="none"></circle>
      <circle stroke-dasharray="10 10" cx="160" cy="90"  r="50" stroke="#607d8b" stroke-width="5.8" fill="none"></circle>
</svg>

Stroke-linejoin

There are used to change the shape of corner of join points.

Example

SVG stroke linejoin Example Normal shape stroke-linejoin="round" stroke-linejoin="bevel"
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="290" height="650">
  <text x="90" y="115"> Normal shape</text>
  <text x="60" y="315"> stroke-linejoin="round"</text>
  <text x="60" y="515">stroke-linejoin="bevel"</text>
  <path stroke="goldenrod" fill="none" stroke-width="15px" d="M90 70 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>
   <path stroke-linejoin="round" stroke="hotpink" fill="none" stroke-width="15px" d="M90 270 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>
     <path stroke-linejoin="bevel" stroke="chocolate" fill="none" stroke-width="15px" d="M90 470 l 50 -50 l 50 50 l 70 40 l-70 40 l-50 50 l-50 -50 l-70 -40 l 73 -42"></path>
</svg>

stroke-opacity

SVG stroke opacity Example
<svg height="150" width="250" xmlns="http://www.w3.org/2000/svg"        xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<line x1="10" y1="10" x2="10" y2="100" stroke="#9c27b0" stroke-width="10px"  stroke-opacity="1.0">  </line>
<line stroke-opacity="0.1" x1="30" y1="10" x2="30" y2="100" stroke="#9c27b0" stroke-width="10px" >  </line>
<line stroke-opacity="0.2" x1="50" y1="10" x2="50" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.3" x1="70" y1="10" x2="70" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.4" x1="90" y1="10" x2="90" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.5" x1="110" y1="10" x2="110" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.6" x1="130" y1="10" x2="130" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.7" x1="150" y1="10" x2="150" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.8" x1="170" y1="10" x2="170" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
<line stroke-opacity="0.9" x1="190" y1="10" x2="190" y2="100" stroke="#9c27b0" stroke-width="10px">  </line>
</svg>


Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.

New Comment







© 2021, kalkicode.com, All rights reserved