【发布时间】：2017-04-02 20:03:59
【问题描述】：
我想创建一个过滤器，当应用于 html 元素时，会为整个元素应用渐变。 css渐变只适用于背景，所以不是我想要的。 我想要说我的元素包含一个三角形和一个圆形，我想对我的元素应用一个过滤器，三角形和圆形将应用渐变。
这是我目前得到的：
.my-element{
filter: url(svg.svg#filter);
}<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="lightGradient" gradientTransform="rotate(-5)">
<stop stop-color="white" stop-opacity="0.4" offset="0%"/>
<stop stop-color="white" stop-opacity="0.5" offset="5%"/>
<stop stop-color="black" stop-opacity="0.2" offset="6%"/>
<stop stop-color="black" stop-opacity="0.3" offset="19%"/>
<stop stop-color="black" stop-opacity="0.2" offset="12%"/>
<stop stop-color="white" stop-opacity="0.8" offset="13%"/>
<stop stop-color="white" stop-opacity="0.9" offset="15%"/>
<stop stop-color="white" stop-opacity="0" offset="15%"/>
<stop stop-color="white" stop-opacity="0" offset="16%"/>
<stop stop-color="white" stop-opacity="0.8" offset="16%"/>
<stop stop-color="white" stop-opacity="0.9" offset="18%"/>
<stop stop-color="white" stop-opacity="0" offset="18%"/>
<stop stop-color="white" stop-opacity="0" offset="20%"/>
<stop stop-color="white" stop-opacity="1" offset="20%"/>
<stop stop-color="white" stop-opacity="1" offset="25%"/>
</linearGradient>
<rect id="recGradient" x="0" y="0" width="100%" height="100%" fill="url(#lightGradient)"/>
<filter id="filter" primitiveUnits="objectBoundingBox">
<feImage x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xlink:href="#recGradient"/>
<feComposite operator="in" in="SourceGraphic"/>
</filter>
</defs>
</svg>编辑：使用上面的代码，该元素在 Firefox 中变得不可见，在 chrome 中它似乎可以工作。
所以，显然我做错了。我不知道如何创建 svg 过滤器，因此我们将不胜感激。
【问题讨论】：
-
尝试使用渐变创建一个矩形，然后将一个 feImage 滤镜指向该矩形。
-
@robert 嗨，你能给我看一个示例代码吗？我尝试添加
<feImage xlink:href="#recGradient"/>，但它给出了解析错误：前缀未绑定到命名空间 -
@RobertLongson 好的，我添加了 xmlns:xlink="w3.org/1999/xlink"，现在它解析了，但我没有得到我想要的结果。我将编辑帖子以显示我所做的。
-
矩形元素应该在过滤器之外。
-
@RobertLongson 好的，我把它放在
<filter>之外，但它仍然是不可见的。
标签： svg gradient svg-filters