Html 如何在已应用模式的SVG元素中应用渐变

我有一些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>

<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>

根据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="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>

<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>

第三

<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>

<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>

---

不幸的是，仍然无法工作。

您可以对构成图案的元素应用渐变。感谢@RobertLongson的评论，事实上，我正在关注您的评论。事实上，我已经试过了，但没有成功。我正在更新我的问题，我已经尝试过了。你能告诉我哪里出了错吗？@罗伯特朗森：我已经添加了我尝试过的内容，但仍然无法成功。引用渐变的正确方式是什么？模式中的元素必须引用渐变，而不是模式本身。我认为您指的是以下方式：

，但无法工作