// JS is not required for the solution. It's used only for the interactive demo.
const svg = document.querySelector('svg');
document.querySelector('#greenButton').addEventListener('click', () => svg.setAttribute('class', 'green'));
document.querySelector('#redButton').addEventListener('click', () => svg.setAttribute('class', 'red'));
5 回答
只需在CSS中使用_3224079_属性中的任何内容即可 . 当然,这需要您在SVG中的某个位置定义线性渐变 .
这是一个完整的例子:
在Finesse写的基础上,这里有一个更简单的方法来定位svg并改变它的渐变 .
这是您需要做的:1 . 为渐变元素中定义的每个颜色停止分配类 . 2.使用普通类定位css并更改每个停靠点的停止颜色 . 赢了!
使用类而不是
:nth-child
的一些好处是,它会想知道你是否需要在第一个孩子或第二个孩子上使用蓝色 .我已在所有Chrome,Firefox和IE11上测试过它:
请在此处查看可编辑示例:https://jsbin.com/gabuvisuhe/edit?html,css,output
2019答案
使用全新的css属性,您可以使用变量更具灵活性
custom properties
只需为渐变中的每个
stop
设置一个命名变量,然后在css中自定义 . 您甚至可以使用javascript动态更改其值,例如:这是一个解决方案,您可以使用CSS添加渐变并更改其颜色:
以下是如何在目标元素上设置linearGradient: