<link href='https://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>
<section>
  <h1>Stroke Dasharray</h1>
  <div class="svg-wrapper">
   <div class="svg-box dasharray1">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 220">
    <line x1="30" y1="200" x2="30" y2="30"　/>
</svg>
    <h2>1px</h2>
  </div>
    
   <div class="svg-box dasharray3">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 220">
    <line x1="30" y1="200" x2="30" y2="30"　/>
</svg>
    <h2>3px</h2>
  </div>
    
    <div class="svg-box dasharray10">
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.9 220">
    <line x1="30" y1="200" x2="30" y2="30"　/>
</svg>
    <h2>10px</h2>
  </div>
 </div>
</section>

html,body{
  height:100%;
  display: block;
}

body{
   font-family: 'Comfortaa', cursive;
}

h1 {
  text-align: center;
  letter-spacing: 2px;
  font-weight: 300;
  font-size:40px;
}

h2{
  text-align:center;
}

svg{
  width: 100px;
  display:block;
  margin:auto;
}

.svg-wrapper{
  text-align:center;
}

.svg-box{
  display:inline-block;
  margin: 0px 20px;
}

.dasharray1{
  line{
    stroke-dasharray: 1;
  }
}

.dasharray3{
  line{
    stroke-dasharray: 3;
  }
}

.dasharray10{
  line{
    stroke-dasharray: 10;
  }
}

line{
  stroke:#000;
  stroke-width:1px;
}