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

Question

我想用一个源组的所有颜色渐变填充一个矩形。我确信有一个过滤器可以解决这个问题，但我无法构建一个来完成工作。

<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，但没有任何运气。

Answer 1

您不能只在过滤器中引用一个对象，您必须先使用 feImage 导入它 - Firefox 不支持这样做，而且 IE 上的大小有时很不稳定。您还应该将填充模式放入您的定义中。这是适用于 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 中受支持。我也不完全确定您想要达到什么效果，张贴您想要做的事情的图片会有所帮助。

Answer 2

我不清楚你想要达到的效果到底是什么。这是你追求的那种效果吗？

http://jsfiddle.net/t9Bfb/

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