Question

我想知道是否可以将svg过滤器应用于剪切的html内容。我找到的所有演示都有剪切和过滤分开。

以下是一个例子：http://jsfiddle.net/B7593/1/。我想让黄色圆圈掉下阴影。

尝试将filter=url('#dropshadow') / style='filter:url(#dropshadow)'添加到circle / clipPath / div元素，但这些元素都不起作用。

Answer 1

我认为你不能按照接近它的方式做到这一点 - 即使你可以将阴影作为剪辑的一部分，当你应用剪辑时也不会看到它，因为没有颜色是保留，只是像素的不透明度用于确定显示的内容。什么工作（至少在Firefox中），是将剪辑和过滤器应用于SVG中的内容，如下所示：

<g filter="url(#dropshadow)">
    <foreignObject width="300" height="300" clip-path="url(#c1)">
        <body>
            <div id="target"></div>
        </body>
    </foreignObject>
</g>

Here's a full example

在svg中为过滤元素添加过滤器（组合clipPath和过滤器元素）

1 个答案: