С праздником господа! Суть проблемы у меня в следующем, никак не получается закрашивать область с точностью до пикселя. Например имеем прямоугольник шириной 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.
Подскажите в каком направлении двигаться.