使用CSS的SVG渐变

我试图将渐变应用到SVG

rect

元素

目前，我正在使用

fill

属性。在我的CSS文件中：

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

在浏览器中查看时，

rect

元素具有正确的填充颜色

---

但是，我想知道是否可以对该元素应用线性渐变？

只需在CSS中使用

填充属性中使用的任何内容即可。
当然，这需要在SVG中的某个地方定义线性渐变

下面是一个完整的示例：


rect{
光标：指针；
形状渲染：边缘清晰；
填充：url（#MyGradient）；
}

rect{fill:url（#MyGradient）}
以下是如何在目标元素上设置linearGradient：

<style type="text/css">
    path{fill:url('#MyGradient')}
</style>
<defs>
    <linearGradient id="MyGradient">
        <stop offset="0%" stop-color="#e4e4e3" ></stop>
        <stop offset="80%" stop-color="#fff" ></stop>
    </linearGradient>
</defs>


路径{fill:url（'#MyGradient'）}
这里有一个解决方案，您可以只使用CSS添加渐变并更改其颜色：


//解决方案不需要JS。它只用于交互式演示。
const svg=document.querySelector（'svg'）；
document.querySelector（“#greenButton”）.addEventListener（'click'，（）=>svg.setAttribute（'class'，'green'）；
document.querySelector（“#redButton”）.addEventListener（'click'，（）=>svg.setAttribute（'class'，'red'））
svg.green停止：第n个子项（1）{
停止颜色：#60c50b；
}
svg.green停止：第n个子项（2）{
停止颜色：#139a26；
}
svg.red stop:n个子项（1）{
停止颜色：#c84f31；
}
svg.red stop:n子级（2）{
停止颜色：#dA3448；
}



绿色
红色
在Finesse所写的基础上，这里有一种更简单的方法来针对svg并更改其梯度

这是您需要做的：

为渐变元素中定义的每个颜色停止指定类
以css为目标，使用普通类更改每个停止的停止颜色
赢
使用类而不是
：n子项
的一些好处是，如果您重新排序站点，它不会受到影响。此外，它使每个类的意图明确-你会想知道你是否需要一个蓝色的第一个孩子还是第二个

我已经在所有Chrome、Firefox和IE11上进行了测试：


。主停止{
停止颜色：红色；
}
.alt停止{
停止颜色：绿色；
}

2019答案
使用全新的css属性，您可以更灵活地使用变量aka
自定义属性


.shape{
宽度：500px；
高度：200px；
}
.形状.梯度背景{
填充：url（#标题形状渐变）#fff；
}
#收割台形状梯度{
--色挡：#f12c06；
--颜色机器人：#faed34；
}

谢谢大家，
谢谢你精确的回答

在阴影dom中使用svg，我在svg中添加了所需的3个线性渐变，即。
我将css填充规则放在web组件上，继承od填充完成了这项工作



：第一个孩子{
高度：150像素；
宽度：150px；
填充：url（#lgrad-p）蓝色；
}
div{
位置：相对位置；
宽度：150px；
高度：150像素；
填充：url（#lgrad-s）红色；
}
const shadow=document.querySelector（'div'）.attachShadow（{mode:'open'}）；
shadow.innerHTML=”\
\
\
\
\
\
\
\
\
";
所以我在一个单独的文件中创建了渐变，并使用
fill
这种方式：
fill:url（../js/gradient.svg#MyGradient）。这是正确的方法吗？@HrishikeshChoudhari：是的，这是正确的，但是Chrome和Safari也不支持引用其他文件中的元素。对IE9不太确定（现在无法测试，请尝试一下）。对于阅读此文章并询问“关于
fill:linear gradient（…）
？”的任何人，
fill
需要一个围绕CSS2
类构建的。换句话说，在我写这篇评论时，这个答案是目前唯一通过CSS实现的方法。您需要添加一个
linearGradient
元素。最后，查看w3的工作草案，在填充css规则中对
线性渐变的支持似乎没有也可能没有进入规范。在这种情况下如何更改方向？@AwQiruiGuo看一下（特别是
gradientTransform
属性）问题中没有任何东西暗示使用php。IE不支持@MaciejKwas，你错了。旧浏览器不会永远存在，所以现在还没有准备好的公司到时候就会准备好。如果有人不准备放弃一部分听众，这并不意味着他没有准备好接受变革，而是意味着他更愿意在以后利用变革来保持更大的听众。@Aoakson IE已死。生命的终结。Edge也在消亡，这是2019年的答案，所以IE不应该算数。IE可以通过使用纯色优雅地降级。@Aoakson我对2019年遇到这种反应感到惊讶。作为一名开发人员，您可能会天真地认为IE在这一级别上支持SVG，更不用说作为一名刚刚起步的开发人员，如果您打算支持IE，那么会为一些不必要的问题提供一个臃肿、多填充的答案。缺少的是，您不知道停止类名是什么以及它们的顺序。实际上，解决方案都是一样好的，唯一的区别是CSS选择器。