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

Можно ли использовать градиенты 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

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

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