1
我想创建一个过滤器，当应用于html元素时，将应用渐变到整个元素。 CSS渐变只适用于背景，所以它不是我想要的。 我想要的是说我的元素包含一个三角形和一个圆，我想对我的元素应用一个过滤器，并且三角形和圆会对它们应用一个渐变。如何使用svg过滤器应用渐变
这是我到目前为止有：
.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中不可见的，在铬似乎工作。
所以，显然我做错了。我不知道如何创建svg过滤器，所以任何帮助，将不胜感激。
尝试创建一个矩形一个渐变，然后指向一个feImage滤镜的矩形。 –
@robert你好，你能告诉我一个示例代码？我尝试添加''，但它给出了解析错误：前缀没有绑定到命名空间 –
BigName
@RobertLongson好的我添加了xmlns：xlink =“http://www.w3.org/1999/xlink“，现在它解析，但我没有得到我想要的结果。我将编辑帖子以显示我所做的。 – BigName