<p>点線：stroke-dasharray</p>
<svg x="0px" y="0px" width="395.9px" height="3" viewBox="0 0 395.9 1">
  <line class="line" x1="0" y1="0.5" x2="395.9" y2="0.5"/>
</svg>
<p>点の開始位置： stroke-dashoffset</p>
<svg x="0px" y="0px" width="395.9px" height="3" viewBox="0 0 395.9 1">
  <line class="line_d" x1="0" y1="0.5" x2="395.9" y2="0.5"/>
</svg>
<p>点の開始位置1： stroke-dashoffset</p>
<svg x="0px" y="0px" width="395.9px" height="3" viewBox="0 0 395.9 1">
  <line class="line1" x1="0" y1="0.5" x2="395.9" y2="0.5"/>
</svg>
<p>点の開始位置2： stroke-dashoffset</p>
<svg x="0px" y="0px" width="395.9px" height="3" viewBox="0 0 395.9 1">
  <line class="line2" x1="0" y1="0.5" x2="395.9" y2="0.5"/>
</svg>

<p>点線うごかす</p>
<svg x="0px" y="0px" width="395.9px" height="3" viewBox="0 0 395.9 1">
  <line class="line3" x1="0" y1="0.5" x2="395.9" y2="0.5"/>
</svg>

svg line {
  fill: none;
  stroke: #09d;
  stroke-width: 3;
}
p{
  margin-top:30px;
}
.line {
   stroke-dasharray: 10;/*点線の長さ・間隔*/
}
.line_d {
   stroke-dasharray: 300;/*点線の間隔を空けてみる*/
}
.line1 {
   stroke-dasharray: 300;/*点線の間隔を空けてみる*/
   stroke-dashoffset: 300;/*点の開始位置*/
}
.line2{
   stroke-dasharray: 300;/*line1と同じ間隔*/
   stroke-dashoffset: 100;/*点の開始位置だけずれている*/
}
.line3 {
   stroke-dasharray: 300;/*点線の長さ・間隔*/
   stroke-dashoffset: 300;/*点の開始位置*/
  -webkit-animation: dash 8s linear 1s infinite;
  animation: dash 8s linear 1s infinite;/*一定に動かす*/
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
  from{
    stroke-dashoffset: 0;
}
}
@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
   from{
    stroke-dashoffset: 0;
}
}