Hard stop Gradient in SVG

For http://stackoverflow.com/questions/21143651/d3-js-dc-js-different-colored-line-segments-for-single-line-in-line-graph

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="100%"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 100 100" preserveAspectRatio="none"> 

<linearGradient id="g">
<stop offset="0" stop-color="#008"/>
<stop offset=".2" stop-color="#008"/>
<stop offset=".2" stop-color="#960"/>
<stop offset=".25" stop-color="#960"/>
<stop offset=".25" stop-color="#008"/>
<stop offset=".3" stop-color="#960"/>
<stop offset=".3" stop-color="#008"/>
<stop offset=".35" stop-color="#960"/>
<stop offset=".35" stop-color="#008"/>
<stop offset=".4" stop-color="#960"/>
<stop offset=".4" stop-color="#008"/>
<stop offset=".45" stop-color="#960"/>
<stop offset=".45" stop-color="#008"/>
<stop offset=".5" stop-color="#960"/>
<stop offset=".5001" stop-color="#800"/>
<stop offset=".8" stop-color="#800"/>
<stop offset=".8001" stop-color="#080"/>
<stop offset="1" stop-color="#080"/>
</linearGradient> 

<path d="M 3 48 30 50 50 78 97 22" stroke-width="14" stroke="url(#g)" fill="none"/>

</svg>