извините за то, что поднимаю старую тему,
но мне кажется, тут всё сильно усложнили.
не нужны никакие ротации и трансформации.
градиент по определению имеет направление,
т.е. координаты начала и окончания действия.
а следовательно достаточно просто изменить это направление:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 1 1">
<defs>
<linearGradient id="l1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="green"/>
<stop offset="100%" stop-color="red"/>
</linearGradient>
<linearGradient id="l2" xlink:href="#l1"
x1="50%" y1="100%" x2="50%" y2="0%"/>
</defs>
<rect x="0" y="0" width="0.5" height="0.5" fill="url(#l1)"/>
<rect x="50%" y="50%" width="0.5" height="0.5" fill="url(#l2)"/>
</svg>
с помощью этих координат можно начинать и заканчивать градиент где угодно,
применяя любые единицы измерения.
