Jump to content
  • 0

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


Zverushka
 Share

Question

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

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

Что я хочу - 

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

 

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

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

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

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

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

Edited by Zverushka
Link to comment
Share on other sites

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

ok

 

 

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

 

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

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

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

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

 

 

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

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

Edited by Николя223
Link to comment
Share on other sites

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

 

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

 

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

  • 0

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

 

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

350px-%D0%A7%D1%91%D1%80%D0%BD%D1%8B%D0%

 

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

Green-Yellow-Pattern-Gradient-Twitter-He

 

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

Link to comment
Share on other sites

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

 

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

 

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

 

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

Link to comment
Share on other sites

  • 0

(Gradient Overlay

 

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

 

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

Link to comment
Share on other sites

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

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

 

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

 

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

Имхо

Edited by Николя223
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy