svg with gradients

gistfile1.txt

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="270" id="chart"><g transform="translate(50,30)"><style>
    .line {
      fill: none;
      stroke: #4682b4;
      stroke-width: 2px;
    }
    div.tooltip {	
      position: absolute;			
      text-align: center;	

      padding: 2px;
      font: 12px sans-serif;		
      background: #4682b4;	
      border: 0px;		
      border-radius: 8px;			
      pointer-events: none;			
    }
    .normal{
      fill: #00ff00;
      fill-opacity:0.6;
      stop-color:#00ff00;
      stop-opacity: 0.6;
    }
    .prehyper{
      fill: #ffff00;
      fill-opacity:0.6;
      stop-color:#ffff00;
      stop-opacity: 0.6;
    }
    .stage1{
      fill: #ffa500;
      fill-opacity:0.6;
      stop-color:#ffa500;
      stop-opacity: 0.6;
    }
    .crisis{
      fill: #ff0000;
      fill-opacity:0.6;
      stop-color:#ff0000;
      stop-opacity: 0.6;
    }
    .normal-prehyper{
      fill:url(#normal-prehyper);
    }
    .prehyper-stage1{
      fill:url(#prehyper-stage1);
    }
    .stage1-crisis{
      fill:url(#stage1-crisis);
    }
    .normal-stage1{
      fill:url(#normal-stage1);
    }
    .normal-crisis{
      fill:url(#normal-crisis);
    }
    .prehyper-crisis{
      fill:url(#prehyper-crisis);
    }
</style><rect x="0" y="0" width="144.75278248996648" height="210" class="prehyper-crisis" transform="rotate(180 72.37639124498324 105)"/><rect x="144.75278248996648" y="0" width="46.818238239066574" height="210" class="prehyper-crisis"/><rect x="191.57102072903305" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="192.0973147420249" y="0" width="0" height="210" class="crisis"/><rect x="192.0973147420249" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="192.62360875501676" y="0" width="0.5262940129918263" height="210" class="crisis"/><rect x="193.1499027680086" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="193.67619678100044" y="0" width="0" height="210" class="crisis"/><rect x="193.67619678100044" y="0" width="1.5788820389755358" height="210" class="crisis"/><rect x="195.25507881997598" y="0" width="0.5262940129918832" height="210" class="crisis"/><rect x="195.78137283296786" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="196.30766684595972" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="196.83396085895157" y="0" width="2.1051760519673905" height="210" class="crisis"/><rect x="198.93913691091896" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="199.46543092391082" y="0" width="0.5262940129918263" height="210" class="crisis"/><rect x="199.99172493690264" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="200.5180189498945" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="201.04431296288635" y="0" width="1.5788820389755358" height="210" class="crisis"/><rect x="202.6231950018619" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="203.14948901485374" y="0" width="0.5262940129918547" height="210" class="crisis"/><rect x="203.6757830278456" y="0" width="0.5262940129918263" height="210" class="stage1-crisis" transform="rotate(180 203.93893003434152 105)"/><rect x="204.20207704083742" y="0" width="0.5262940129918547" height="210" class="stage1"/><rect x="204.72837105382928" y="0" width="1.5788820389755642" height="210" class="prehyper-stage1" transform="rotate(180 205.51781207331706 105)"/><rect x="206.30725309280484" y="0" width="0.5262940129918263" height="210" class="prehyper"/><rect x="206.83354710579667" y="0" width="0.5262940129918547" height="210" class="normal-prehyper" transform="rotate(180 207.0966941122926 105)"/><rect x="207.35984111878852" y="0" width="0.5262940129918547" height="210" class="normal"/><rect x="207.88613513178038" y="0" width="0.5262940129918547" height="210" class="normal"/><rect x="208.41242914477223" y="0" width="1.5788820389755358" height="210" class="normal"/><rect x="209.99131118374777" y="0" width="0.5262940129918547" height="210" class="normal"/><rect x="210.51760519673962" y="0" width="223.14866150854402" height="210" class="normal-crisis"/><rect x="433.66626670528365" y="0" width="96.33373329471635" height="210" class="normal-crisis" transform="rotate(180 481.8331333526418 105)"/><defs><linearGradient id="normalprehyper"><stop class="normal" offset="0"/><stop class="prehyper" offset="1"/></linearGradient><linearGradient id="prehyper-stage1"><stop class="prehyper" offset="0"/><stop class="stage1" offset="1"/></linearGradient><linearGradient id="stage1-crisis"><stop class="stage1" offset="0"/><stop class="crisis" offset="1"/></linearGradient><linearGradient id="normal-stage1"><stop class="normal" offset="0"/><stop class="prehyper" offset="0.5"/><stop class="stage1" offset="1"/></linearGradient><linearGradient id="prehyper-crisis"><stop class="prehyper" offset="0"/><stop class="stage1" offset="0.5"/><stop class="crisis" offset="1"/></linearGradient><linearGradient id="normal-crisis"><stop class="normal" offset="0"/><stop class="prehyper" offset=".3"/><stop class="stage1" offset=".6"/><stop class="crisis" offset="1"/></linearGradient></defs><path class="line" d="M0,72.15645285509956L144.75278248996648,170.18703927824845L191.57102072903305,9.654527450764675L192.0973147420249,7.179007591594228L192.0973147420249,7.179007591594228L192.62360875501676,6.142589943888225L193.1499027680086,8.70392782484322L193.67619678100044,12.106942457916176L193.67619678100044,12.106942457916176L195.25507881997598,5.809219936186594L195.78137283296786,2.2807789635823497L196.30766684595972,3.934426229508233L196.83396085895157,0.8416767521179622L198.93913691091896,0L199.46543092391082,2.571239960391665L199.99172493690264,3.3105952249972574L200.5180189498945,4.442732973924535L201.04431296288635,10.232148751237759L202.6231950018619,18.5168885465948L203.14948901485374,30.54131367587192L203.6757830278456,63.66707008471781L204.20207704083742,95.98085597975576L204.72837105382928,132.44031246561778L206.30725309280484,154.97744526350533L206.83354710579667,166.99856969963693L207.35984111878852,177.3231378589504L207.88613513178038,180.3927824843217L208.41242914477223,187.8853559247442L209.99131118374777,192.18285840026405L210.51760519673962,190.81307074485642L433.66626670528365,8.70392782484322L530,206.74551655847728"/><g class="x axis" transform="translate(0,210)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#000" d="M0.5,6V0.5H530.5V6"/><g class="tick" opacity="1" transform="translate(147.35795854193387,0)"><line stroke="#000" y2="6"/><text fill="#000" y="9" dy="0.71em">2012</text></g><g class="tick" opacity="1" transform="translate(339.98156729695063,0)"><line stroke="#000" y2="6"/><text fill="#000" y="9" dy="0.71em">2013</text></g></g><g class="y axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#000" d="M-6,210.5H0.5V0.5H-6"/><g class="tick" opacity="1" transform="translate(0,210.5)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,177.49306854439433)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">100</text></g><g class="tick" opacity="1" transform="translate(0,144.48613708878867)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">200</text></g><g class="tick" opacity="1" transform="translate(0,111.47920563318297)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">300</text></g><g class="tick" opacity="1" transform="translate(0,78.4722741775773)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">400</text></g><g class="tick" opacity="1" transform="translate(0,45.46534272197161)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">500</text></g><g class="tick" opacity="1" transform="translate(0,12.458411266365943)"><line stroke="#000" x2="-6"/><text fill="#000" x="-9" dy="0.32em">600</text></g></g><circle class="dot" fill="purple" cx="0" cy="72.15645285509956" r="2"/><circle class="dot" fill="purple" cx="144.75278248996648" cy="170.18703927824845" r="2"/><circle class="dot" fill="purple" cx="191.57102072903305" cy="9.654527450764675" r="2"/><circle class="dot" fill="purple" cx="192.0973147420249" cy="7.179007591594228" r="2"/><circle class="dot" fill="purple" cx="192.0973147420249" cy="7.179007591594228" r="2"/><circle class="dot" fill="purple" cx="192.62360875501676" cy="6.142589943888225" r="2"/><circle class="dot" fill="purple" cx="193.1499027680086" cy="8.70392782484322" r="2"/><circle class="dot" fill="purple" cx="193.67619678100044" cy="12.106942457916176" r="2"/><circle class="dot" fill="purple" cx="193.67619678100044" cy="12.106942457916176" r="2"/><circle class="dot" fill="purple" cx="195.25507881997598" cy="5.809219936186594" r="2"/><circle class="dot" fill="purple" cx="195.78137283296786" cy="2.2807789635823497" r="2"/><circle class="dot" fill="purple" cx="196.30766684595972" cy="3.934426229508233" r="2"/><circle class="dot" fill="purple" cx="196.83396085895157" cy="0.8416767521179622" r="2"/><circle class="dot" fill="purple" cx="198.93913691091896" cy="0" r="2"/><circle class="dot" fill="purple" cx="199.46543092391082" cy="2.571239960391665" r="2"/><circle class="dot" fill="purple" cx="199.99172493690264" cy="3.3105952249972574" r="2"/><circle class="dot" fill="purple" cx="200.5180189498945" cy="4.442732973924535" r="2"/><circle class="dot" fill="purple" cx="201.04431296288635" cy="10.232148751237759" r="2"/><circle class="dot" fill="purple" cx="202.6231950018619" cy="18.5168885465948" r="2"/><circle class="dot" fill="purple" cx="203.14948901485374" cy="30.54131367587192" r="2"/><circle class="dot" fill="purple" cx="203.6757830278456" cy="63.66707008471781" r="2"/><circle class="dot" fill="purple" cx="204.20207704083742" cy="95.98085597975576" r="2"/><circle class="dot" fill="purple" cx="204.72837105382928" cy="132.44031246561778" r="2"/><circle class="dot" fill="purple" cx="206.30725309280484" cy="154.97744526350533" r="2"/><circle class="dot" fill="purple" cx="206.83354710579667" cy="166.99856969963693" r="2"/><circle class="dot" fill="purple" cx="207.35984111878852" cy="177.3231378589504" r="2"/><circle class="dot" fill="purple" cx="207.88613513178038" cy="180.3927824843217" r="2"/><circle class="dot" fill="purple" cx="208.41242914477223" cy="187.8853559247442" r="2"/><circle class="dot" fill="purple" cx="209.99131118374777" cy="192.18285840026405" r="2"/><circle class="dot" fill="purple" cx="210.51760519673962" cy="190.81307074485642" r="2"/><circle class="dot" fill="purple" cx="433.66626670528365" cy="8.70392782484322" r="2"/><circle class="dot" fill="purple" cx="530" cy="206.74551655847728" r="2"/></g></svg>