Как сделать градиент и перенос текста в SVG?

Question

[Евгений Журов]

Добрый день. Нужно сделать в SVG текст с градиентом. Это, в общем-то не проблема:

<svg>
       <defs> 
             <linearGradient id="textgradient" x1="0%" x2="100%" y1="0%" y2="0%">
                    <stop stop-color="#000" offset="0%"></stop>
                    <stop stop-color="#64284a" offset="60%"></stop>
                    <stop stop-color="#9d1e65" offset="80%"></stop>
                    <stop stop-color="#f89f7c" offset="100%"></stop>
             </linearGradient>
       </defs>
       <text x="0" y="0" fill="url(#textgradient)">Upgrade all senses</text>
</svg>

Но, разумеется, текст, выведенный таким образом, не переносится на новую строку, если становится шире блока, в котором эта свг лежит.
Эксперименты с foreignObject результата не дали. Возможно, что-то делал не так.
Как можно решить эту проблему?

Comments

[Moskus]

Приведите ваш код с использованием foreignobject.
Перенос текста не является частью спецификации SVG 1.1
Есть решения на JS: https://gist.github.com/davelandry/a39f0c3fc52804ee859a