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>

目标是我的rect从左到右填充源线的颜色（红色，橙色，绿色和蓝色）。对于corse来说，源颜色并不总是相同:-)我已经尝试了几个版本的feBlend，feFlood和feColorMatrix而没有任何运气。

Answer 1

你不能只引用过滤器中的一个对象，你必须先用feImage导入它 - 这样做不支持Firefox，并且在IE上偶尔会出现大小问题。您还应该将填充模式放入defs中。这是一个适用于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>

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

2 个答案: