svg градиент текста - не могу встроить в документ

[Zverushka]

http://jsfiddle.net/6ENRX/1/

Такая вот проблема - кнопка в самом низу.

Что я хочу - 

есть отдельно внешний вид для кнопки - внутри текст, залитый градиентом с помощью svg. Чтобы, если браузер не поддерживает svg - отображался просто текст нужного цвета.

 

Проблема - кнопка уезжает, не пойми куда, текст не позиционируется внутри. 

[lexxcode]

Так что ли? Только я там градиент изменил, а то плохо видно было

[Zverushka]

Блин - а в мозилле просто кружок! А в ослике сам текст прижат к верху, а не по центру.

Пробовала установить 2 скрипта js для создание градиента - но у меня почему-то появлялась куча надписей на кнопке, а в другом случае скрипт работал криво и надпись была шире кнопки и еще и обрезалась самим скриптом.

3й скрипт на основе канваса - градиент заполняется криво будто стоп калор на 10% (хотя я проверила 50%), в хроме не наследуется фонт фемили - в итоге тоже не подошел - получается я никаким методом не могу реализовать градиент, кроме вырезанной картинки (((.

Edited November 12, 2013 by Zverushka

[Николя223]

а обязательно так? колорзиллой не?

[lexxcode]

там имеется ввиду градиент для текста, а не для кнопки, так что колорзилла тут не помошник

[Николя223]

там имеется ввиду градиент для текста, а не для кнопки, так что колорзилла тут не помошник

ok

 

 

Блин - а в мозилле просто кружок! А в ослике сам текст прижат к верху, а не по центру.

 

была бы адекватная поддержка всеми браузерами background-clip:text проблем бы не было и про svg аналогично

вот нашёл http://www.myadzel.ru/tests/html/text-background/

проверил в хроме, мазиле опере ie 9+

работает одинаково, кроме ослов - там нужно поправку вносить

 

 

получается я никаким методом не могу реализовать градиент, кроме вырезанной картинки

не исключенно

Edited November 13, 2013 by Николя223

[SelenIT]

была бы адекватная поддержка всеми браузерами background-clip:text

 

точнее, был бы он действительно частью стандарта, а не отсебятиной одного конкретного движка (ладно, полутора движков)

 

А по сабжу — всё-таки не получается, видимо, без явного задания размеров. SVG-то идет как внедренный элемент а-ля айфрейм или канвас, по умолчанию берет ширину 300px (почему эта дефолтная ширина не растягивает предка в Fx — загадка, явно баг, но если убрать width: 100% у SVG, текст появится... снаружи кнопки). С явной попиксельной подгонкой, вроде, всё приемлемо во всех браузерах, включая IE9 (http://jsfiddle.net/QFSSc/4/). Может, оно и нормально — это ведь графика, по сути-то?

[lexxcode]

стоит признать, что это весьма неплохая отсебятина. Но лучше было бы что-то вроде такого:

.class {    color : linear-gradient(#fff, #e1e1e1);}

[SelenIT]

Еще лучше, если бы это было text-fill-image (по аналогии с text-fill-color, который уже работает там за префиксом же наряду с text-stroke-*, и подсвойствами background-а). Всё-таки путать разные типы значений для свойства с именем *-color едва ли лучше, чем путать логику фона и фигуры...

[lexxcode]

Градиент это не картинка это градиент, и он никак не связан конкретно с фонами. просто градиент. Его же не назвали background-gradient, например, а просто linear-gradient, что не привязывает его к чему либо конкретному. Так что чисто логически можно спокойно применить и для других цветов, хоть текста, хоть бордеров, хоть фона. 

[SelenIT]

Градиент это не картинка

 

С точки зрения спецификации — картинка. И, по логике, его можно использовать в любых свойствах, понимающих тип значения image (напр. background-image, border-image или list-style-image). Но не тип color (background-color: linear-gradient... не работает и не должен).

[lexxcode]

весьма странно градиент называть картинкой 
 
вот картинка:

А градиент - это градиент

[SelenIT]

Но называть градиент цветом еще более странно

 

В конце концов, если уж называют картиной (даже без уменьшительного суффикса!) вот это:

 

то что помешает назвать картинкой вот это?

 

Тем более CSS-градиенты вчистую портированы из SVG, а SVG — хоть и векторно-декларативные, но всё же явные картинки...

[lexxcode]

Но называть градиент цветом еще более странно

 

Градиентное наложение (Gradient Overlay) на цвет, вполне логично

 

Тем более CSS-градиенты вчистую портированы из SVG, а SVG — хоть и векторно-декларативные, но всё же явные картинки...

 

 

Портировали, да недопортировали. В svg как раз есть более адекватное понятие - fill, то есть заливка. Что в свою очередь позволяет относиться к градиенту как градиенту, эффекту, который может быть наложен на что угодно.

[SelenIT]

(Gradient Overlay

 

Ну-ка, ну-ка, а где у нас такое бывает? Уж не в графических ли редакторах, т.е. при создании картинок?

 

И вообще, руки прочь от масштабирования градиентов через background-size, (не)повторения через background-repeat и позиционирования через background-position! Считать градиент особым случаем картинки (прямоугольником, раскрашенным по опред. алгоритму) — удобная и полезная абстракция. А вот полезность введения новой сущности «хитрые операции над цветами», вдобавок к имеющимся цветам и картинкам, как минимум еще нуждается в доказательстве.

[lexxcode]

Ну-ка, ну-ка, а где у нас такое бывает? Уж не в графических ли редакторах, т.е. при создании картинок?

Именно, в разделе Effects  

 

И вообще, руки прочь от масштабирования градиентов через background-size, (не)повторения через background-repeat и позиционирования через background-position!

Да кто же мешает  

[SelenIT]

Да кто же мешает

 

А уже можно масштабировать и позиционировать цвета? Или эффекты — отдельно от масштабирования картинки, к которой эффект применен?

[Николя223]

Дико извиняюсь что вмешиваюсь в вашу высокопознавательную беседу. но помоему вы немного от темы отвлеклись.  Что такое градиент и svg - смотря с какого ракурса смотреть.
я и svg не считаю за картинку... 
кто то считает...
из википедии про градиент,
 
 

Градие́нт (от лат. gradiens, род. падеж gradientis — шагающий, растущий) — вектор, своим направлением указывающий направление наискорейшего возрастания некоторой величины , значение которой меняется от одной точки пространства к другой (скалярного поля), а по величине (модулю) равный быстроте роста этой величины в этом направлении.
Например, если взять в качестве  высоту поверхности земли над уровнем моря, то её градиент в каждой точке поверхности будет показывать «направление самого крутого подъёма», и своей величиной характеризовать крутизну склона.
С математической точки зрения градиент — это производная скалярной функции, определенной на векторном пространстве.

 
В конечном итоге, всё что находится на экране - это изображение, SVG  и градиент - также становятся изображениями, хоть изначально они ими и не являлись.
изображение и на JS можно нарисовать.... и краской на бумаге...
а википедия вон что пишет)
 

Изображе́ние — объект, образ, явление, в той или иной степени подобное (но не идентичное) изображаемому или сам процесс их создания. Подобие достигается вследствие физических законов получения изображения (например, оптическое изображение) либо результатом труда создателя изображения (например, рисунок, живопись, скульптура, сценический образ). Под изображением в узком смысле, подразумевают произведение в живописи или графике

в моем понимание под "картинкой" (в вебе) подразумевается то, что можно скопировать к себе на компьютер в виде как ни странно картинки... градиент.. ну да )) можно скриншотом

если градиент в фотошопе нарисован и вставлен на сайт... типичная картинка

 

Тут конкурс недавно был, все помнят - рисовали на CSS... в результате получились "картинки" или "не картинки"?... это риторический вопрос)

Имхо

Edited November 13, 2013 by Николя223