у вас фигура сначала раскрашивается, потом растягивается целиком.
чтобы разделить заливку и масштабирование, нужно каким-то образом совместить в одном объекте три системы координат: экранную, фигуры и заливки. а при обычном способе можно только две - у заливки указать что она привязана к системе координат фигуры, и если потом фигуру в экранных координатах трансформировать, заливка трансформируется вместе с ней.
как вариант, можно отвязать фигуру от экрана путём вывода в экранных координатах прямоугольника без трансформации, которому нужная фигура задана как clipPath с указанной привязкой к системе координат прямоугольника (clipPathUnits="objectBoundingBox").
https://codepen.io/anon/pen/PRMjKR
но в вашем конкретном случае куда проще не пытаться хитро растягивать сам svg, а сделать его метровой ширины и зацикленным, после чего показывать от него сколько влезет фоном у вашего футера. несколько десятков лишних точек в фигуре веса файлу добавит совсем немного.