CSS 3 градиенты для стилизации элементов SVG - PullRequest
Новая
       8

CSS 3 градиенты для стилизации элементов SVG

8 голосов
/ 05 августа 2011

Можно ли использовать CSS3-градиенты для стилизации свойства заливки?

Я знаю, что SVG предоставляет свои собственные градиенты.Но идеальным решением для меня было бы: 

.button{
    fill:#960000;
    fill: -webkit-gradient,linear,left bottom,left top,
          color-stop(0.45, #37304C),color-stop(0.73, #534D6B));
    fill: -moz-linear-gradient(center bottom,#37304C 45%,#534D6B 73%);
    ...
}

Когда я пытался использовать SVG-градиенты, я застревал при попытке извлечь атрибут стиля во внешнюю таблицу стилей.Казалось, что fill: url (#linearGradientXYZ) не работает, так как градиент был определен в файле .svg.

1 Ответ

13 голосов
/ 19 августа 2011

Нет, пока нельзя использовать CSS3-градиенты для свойства fill. Хорошая новость заключается в том, что этот вопрос обсуждается рабочими группами CSS и SVG, а SVG.next будет зависеть от значений изображений CSS3 (которые определяют синтаксис CSS-градиента). Смотри http://www.w3.org/2011/07/29-svg-minutes.html#item08.

Обратите внимание, что базовый URL для fill:url(...) по умолчанию является файлом, содержащим это правило. Поэтому, если вы хотите переместить fill:url(#linearGradientXYZ) во внешнюю таблицу стилей, не забудьте добавить полный путь к файлу, содержащему это определение градиента, например. fill:url(../images/gradients.svg#linearGradientXYZ).

...