Пиксельный линейный градиент в SVG
 

С праздником господа! Суть проблемы у меня в следующем, никак не получается закрашивать область с точностью до пикселя. Например имеем прямоугольник шириной 650px, мне нужно к примеру закрасить первые 78px в красный цвет до границы, остальные в зеленый. 78px это не константа, а переменная которая может изменяться динамически, т.е возможны любые значения. Вычисляем процент для градиента: (78px / 650px) * 100 = 12%.

<svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1" width="650" height="100"> 
  <defs>
   <linearGradient id="background">
    <stop style="stop-color:red" offset="12%"/>
    <stop style="stop-color:green" offset="0%"/>
   </linearGradient>
  </defs>
  <path d="M0 0 h650 v100 h-650 Z" fill="url(#background)"/>
 </svg>

Получается либо 77px либо 79px или 80px но не как не 78px :)
Методом научного тыка выяснил что для данного размера области (а может и для любой) минимальный процентный шаг градиента составляет 0.4%, 650 х 0.4% = 2.6px которая в svg округляется до 3. А например 650 х 0.2% = 1.3px который по логике должен округлиться в 2 или 1 округляется в 0. Т.е по сути не получается делать точные переходы цветом.
Браузер Chrome Версия 34.0.1847.131 m.

Подскажите в каком направлении двигаться.

Делайте с помощь canvas :)

Или подставляйте значения в пикселях и перерасчет из процентов в пиксели делайте самостоятельно.