我有一些SVG元素，其中已经应用了一些模式。该图案用作填充颜色。这意味着该模式填满了整个SVG元素。基本上我想用模式部分填充我的元素。
从不同的来源，我发现我可以应用线性渐变来部分填充元素。
所以我的问题是我可以在图案上使用渐变，还是有任何方法可以通过图案部分填充元素？
注意可以在原始元素（带图案）的顶部绘制（使用渐变）相同的元素来实现此目的。但是在它上面绘制一个相同的对象对我没有帮助。
我尝试了什么
<defs>
<pattern id="patternToApply" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="Firebrick"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="url(#patternToApply)"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
来自Robert Longson的评论我试过以下：
第一
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
第二
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="red"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
第三
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
遗憾的是仍然无法正常工作。