将过滤器添加到svg中的裁剪元素(组合clipPath和filter元素) [英] Add filter to clipped element in svg (combine clipPath and filter elements)
问题描述
我想知道是否可以将svg过滤器应用于剪切的html内容.我发现的所有演示都有单独的剪辑和过滤.
I wonder if it's possible to apply svg filter to clipped html content. All demos I found have clipping and filtering separate.
这里是一个示例: http://jsfiddle.net/B7593/1/.我希望黄色圆圈能遮住阴影.
Here's an example: http://jsfiddle.net/B7593/1/. I want the yellow circle to drop a shadow.
尝试将 filter = url('#dropshadow')/ style ='filter:url(#dropshadow)'添加到 circle / clipPath / div 元素，但这些都不起作用.
Tried adding filter=url('#dropshadow') / style='filter:url(#dropshadow)' to circle / clipPath / div elements, but none of these worked.
推荐答案
我认为您无法以接近它的方式进行操作-即使您可以将阴影作为片段的一部分，也不会由于没有保留任何颜色，因此在应用剪辑时看不到它，仅使用像素的不透明度来确定显示的内容.至少在Firefox中有效的方法是，将片段和过滤器同时应用于SVG中的内容，如下所示:
I don't think you can do it the way you're approaching it - even if you could make the shadow a part of the clip, you wouldn't see it when you applied the clip because none of the colour is retained, just the opacity of the pixels is used to determine what shows through. What will work (in Firefox at least), is to apply both the clip and the filter to content within the SVG like this:
<g filter="url(#dropshadow)">
<foreignObject width="300" height="300" clip-path="url(#c1)">
<body>
<div id="target"></div>
</body>
</foreignObject>
</g>
这篇关于将过滤器添加到svg中的裁剪元素(组合clipPath和filter元素)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
