Не могу залить текст градиентом при помощи SVG, как правильно?

Question

[acspro]

Возникла необходимость сделать текста цвет градиентом. Выбрал svg так как более менее совместима технология с браузерами современными. css.yoksel.ru/css-and-svg-masks вот - по этой ссылке пробовал почитать и сделать - не получается совершенно. Может кто нибудь подсказать как правильно сделать? Проблема конкретно в том что не отображается в FireFox текст?

<svg  width="420" height="80">
							<defs>
								<linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
								  <stop offset="0%"   stop-color="rgb(239,40,87)" />
								  <stop offset="100%" stop-color="rgb(255,88,62)" />
								</linearGradient>
							  
								<pattern id="p-stripes" 
										 patternUnits="userSpaceOnUse"
										 width="420" height="80" 
										 viewbox="0 0 420 80">
								  <rect width="420" height="80"
										  fill="url(#MyGradient)"/>
								</pattern>
							  </defs>
						  
							<text x="0" y="97%">14 200 000</text>
						  </svg>

Comments

[Lynn «Кофеман»]

Ну так а что не получается-то? Где код?

[acspro]

Алексей Тен: ))) Блин совсем упустил про код, извиняюсь. Дело в том что в FireFox выводится просто текст прозрачный

[acspro]

acspro: А сам блок сверстан по адресу ivideo.acspro.ru

[Lynn «Кофеман»]

А где DOCTYPE?

Answer 1

[Евгений Петров]

Вы же свой код ответом назначили в предыдущей теме, а он — вовсе не ответ?)
Можно ли задать градиентую заливку у текста при помощи css?

Ладно, сделаем скидку юным программистам — jsfiddle.net/petroveg/q5w6393x
Не нужен вам pattern.

Comments

[acspro]

Да не могу понять почему не работает, вроде все как у вас. Но в файерфокс не показывает

[Евгений Петров]

Мой пример в вашем FF работает? Ну так уменьшайте свой код до минимально проблемного, и увидите ошибку.

[acspro]

Евгений Петров: Тут такая ернунда. Разобрался спасибо. Стало показываться когда тупо вынес стили в тег

[Евгений Петров]

Приехали:) В статье же написан код SVG и CSS. Ну хорошо, что разобрались. А почему паттерн в вашем случае не нужен, поняли?

[acspro]

Евгений Петров: Честно не понял. Да взял с дуру верстку лендинга, всю жизнь на бакенде сидел. А тут вроде все просто - но вот такие мелочи - их нужно знать и понимать. Вот и встало все)))

[Евгений Петров]

Вы не используете изображение, поэтому достаточно применить просто градиент.

[acspro]

Евгений Петров: Спасиб, теперь буду знать. А вообще нужно почитать. SVG достаточно крутой формат и перспективный.