Question

我们可以创建一个过滤器，以便创建一个临时的svg元素并将其作为源图形吗？像这样：

<svg version="1.1" width="700" height="700" >
    <defs>
        <filter id="f1" x="0" y="0" width="100%" height="100%">
            <rect id="rect1" width="30" height="30" fill="#aaaaaa"/>
            <feComposite in="url(#rect1)" in2="SourceGraphic" operator="over" />
        </filter>
    </defs>
    <circle cx="50" cy="50" r="50" fill="#ffffff" filter="url(#f1)" />
</svg>

它不能正常工作。

Answer 1

您可以使用＆lt; feImage＆gt;，如下所示：

<svg version="1.1" width="700" height="700" >
    <defs>
        <filter id="f1" x="0" y="0" width="100%" height="100%">
            <feImage xlink:href="#rect1"/>
            <feComposite in2="SourceGraphic" operator="over" />
        </filter>
        <rect id="rect1" width="30" height="30" fill="blue"/>
    </defs>

    <circle cx="50" cy="50" r="50" fill="green" filter="url(#f1)" />
</svg>

请参阅fiddle。

但是，某些浏览器不支持＆lt; feImage＆gt;完全，例如Firefox和IE，但它在Chrome和Opera中运行良好。

非SourceGraphic svg元素作为过滤器的来源？

1 个答案: