csssvg

Svg line half solid, half dashed

I have an inline SVG object, and some lines in it. I am trying to paint half of the line solid and the other half dashed.

  
<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line stroke-dasharray="50%,1%,1%,1%" x1="10" x2="280" y1="10" y2="10" />
  </g>
</svg>

Solution 

  • <svg viewBox="0 0 300 100" style="background:pink;height:160px">
    <line pathLength="100" stroke-dasharray="50,3,7,2,8,1,9,0,20" 
          stroke="black" stroke-width="20"
          x1="0" x2="300" y1="50" y2="50" />
</svg>