Я пытаюсь применить градиент к rect
элементу SVG .
В настоящее время я использую fill
атрибут. В моем файле CSS:
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}
И rect
элемент имеет правильный цвет заливки при просмотре в браузере.
Однако я хотел бы знать, могу ли я применить к этому элементу линейный градиент?
css
svg
gradient
linear-gradients
Хришикеш Чоудхари
источник
источник
fill
следующим образом:fill: url(../js/gradient.svg#MyGradient);
. Это правильный путь?fill: linear-gradient (...)
?"fill
требуется,<paint>
который построен на основе<color>
класса CSS2 . Другими словами, на момент написания этого комментария этот ответ - единственный способ сделать это через CSS. Вам нужно добавитьlinearGradient
элемент. Наконец, просматривая рабочий проект w3 для SVG2 , выяснилось , что поддержкаlinear-gradient
правила CSS для заполнения отсутствует и может не попасть в спецификацию.gradientTransform
атрибут)Ответ 2019
С новыми свойствами css вы можете иметь еще большую гибкость с переменными, также известными как
custom properties
Просто установите именованную переменную для каждого
stop
в градиенте, а затем настройте, как вам нравится, в css. Вы даже можете динамически изменять их значения с помощью javascript, например:источник
Основываясь на том, что написал Finesse, вот более простой способ настроить svg и изменить его градиент.
Вот что вам нужно сделать:
Некоторые преимущества использования классов вместо того
:nth-child
, что это не повлияет, если вы измените порядок своих стопов. Кроме того, это проясняет цель каждого класса - вам останется только задуматься, нужен ли вам синий цвет для первого дочернего элемента или для второго.Я тестировал его на всех Chrome, Firefox и IE11:
См. Редактируемый пример здесь: https://jsbin.com/gabuvisuhe/edit?html,css,output
источник
Вот решение, в котором вы можете добавить градиент и изменить его цвета, используя только CSS:
источник
Спасибо всем за точные ответы.
Используя svg в теневом домене, я добавляю 3 линейных градиента, которые мне нужны в svg, внутри файла. Я помещаю правило заполнения css в веб-компонент, и наследование od fill выполняет свою работу.
см. мой тест в коде
Первый - обычный SVG, второй - внутри теневого дома.
источник
Вот как установить linearGradient для целевого элемента:
источник