SVG Stroke

stroke are used to defined the color of svg elements outline shape. stroke are provide wide range of properties.

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
  • stroke-linejoin (use in css properties)

stroke

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

Demo 1

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 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 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 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 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

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>

© 2019, regularcodes.com, All rights reserved