Svg过滤器将一个组的颜色作为填充颜色应用于另一个组或元素

我想用一个源组的所有颜色的渐变填充一个矩形。我相信有一个过滤器，但我不能建立一个工作完成

<svg width="100" height="100">
    <defs>
        <filter id="f1">
          <feBlend in="SourceGraphic" in2="url(#line)"/>
        </filter>
    </defs>
    <g id="line">
        <line x1="10" y1="10" x2="20" y2="20" stroke="red"/>
        <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/>
        <line x1="30" y1="10" x2="40" y2="20" stroke="green"/>
        <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/>
    </g>
    <g id="rect" filter="url(#f1)">
        <rect x="10" y="30" width="40" height="40" stroke="black" stroke-width="2"/>
    </g>
</svg>   

---

目标是让我的矩形从左到右填充源行的颜色（红色、橙色、绿色和蓝色）。当然，源颜色并不总是一样的：-）我已经尝试了几个版本的feBlend、feFlood和feColorMatrix，但运气不好。

你不能只引用过滤器中的对象，你必须先用feImage导入它——Firefox不支持这样做，IE也不支持大小调整。你还应该将填充模式放入DEF中。下面是一个适用于safari/chrome的更大版本-添加feTile，以便您可以更清楚地看到效果：

<svg width="400px" height="400px">
    <defs>

    <g id="line">
        <line x1="10" y1="10" x2="20" y2="20" stroke="red"/>
        <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/>
        <line x1="30" y1="10" x2="40" y2="20" stroke="green"/>
        <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/>
    </g>
        <filter id="f1" x="0%" y="0%" height="100%" width="100%">
            <feImage xlink:href="#line" width="50" height="20" result="myPattern"/>
            <feTile in="myPattern" result="tilePattern"/>
            <feBlend mode="normal" in="tilePattern" in2="SourceGraphic"/>
        </filter>
    </defs>

    <g id="rect" filter="url(#f1)">
        <rect x="10" y="30" width="300" height="300" stroke="black" stroke-width="2"/>
    </g>
</svg> 

---

现在，如果你真的想把这些颜色转换成渐变，你必须用JavaScript来实现。理论上，有一种方法可以通过使用fillPaint和strokePaint在过滤器中实现，但这些仅在IE和Firefox中受支持。我也不完全确定你想要达到什么效果，张贴一张你想要达到的效果的图片会有帮助。

我不清楚你想要达到什么效果。这就是你想要的效果吗

当然可以！因为线条组的颜色可能会改变，所以我需要一个过滤器，这样我就不必考虑每一种颜色。我看不到一种方法可以使用过滤器来获得你想要的。恐怕你需要考虑一个脚本解决方案。那么，我想把你的评论放在你的答案中，并接受这是正确的答案。。。这至少是它应该看起来的样子。“在Firefox上不支持这样做，在IE上大小调整有时也不可靠”，这听起来像是一个淘汰标准。我通过webservice接收svg，所以我没有好的选项来操作dom。。。除了javascript。。。

<svg width="100%" height="100%" viewBox="0 0 60 60">
    <defs>
        <linearGradient id="f1">
          <stop offset="0.125" stop-color="red"/>
          <stop offset="0.275" stop-color="orange"/>
          <stop offset="0.625" stop-color="green"/>
          <stop offset="0.875" stop-color="blue"/>
        </linearGradient>
    </defs>
    <g id="rect" fill="url(#f1)">
        <rect x="10" y="30" width="40" height="40" stroke="black" stroke-width="2"/>
    </g>
    <g id="line">
        <line x1="10" y1="10" x2="20" y2="20" stroke="red"/>
        <line x1="20" y1="20" x2="30" y2="10" stroke="orange"/>
        <line x1="30" y1="10" x2="40" y2="20" stroke="green"/>
        <line x1="40" y1="20" x2="50" y2="10" stroke="blue"/>
    </g>
</svg>