SVG过滤器会导致部件被剔除

我不确定描述此的最佳方式是什么，但我会上传一张图像，您可以在codepen上看到自己的图像。 SVG过滤器会导致部件被剔除

的CSS：

.container{ 
    position: relative; 
    margin-top: 50%; 
    -webkit-filter: url("#goo"); 
    filter: url("#goo"); 
}

的SVG过滤器：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <defs> 
    <filter id="goo"> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" /> 
     <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -9" result="goo" /> 
     <feComposite in="SourceGraphic" in2="goo" operator="atop"/> 
    </filter> 
    </defs> 
</svg>

基本上，我试图使用SVG滤镜创建一些圈子里 “糊糊” 的效果。它有点像预期的那样工作，除了有时候，在某些地方效果会“截断”。

发生这种情况的地方看似随机变化。我试图在Chrome，Firefox和Edge中重现这一点，结果非常不一致。

这只是一个SVG过滤器正在越野车的情况吗？或者我用他们错了？

谢谢。

来源

2017-10-19 Manu

正常情况下，这是因为过滤区域不够大。不过，我认为这种情况很好。它在Firefox中看起来不错。但是，Chrome中存在一些问题。但我认为这只是Chrome的一个bug。 –

如果您将此设置为仅SVG的动画，而不是尝试将SVG滤镜应用于HTML元素，您可能会发现运气更好。 –

SVG过滤器有一个filter effects region，它不跨越整个画布，但仅超出他们工作的对象边界框。您看不到的默认值在每个方向上都为10％：

<filter filterUnits="objectBoundingBox" 
     x="-10%" y="-10%" width="120%" height="120%">

如果这些还不够，请选择更大的值。如果您不想使用百分比而只使用像素值，请设置filterUnits="userSpaceOnUse"并使用过滤对象的坐标系定位效果区域。

来源

2017-10-19 19:48:06 ccprog

就是这样，谢谢！ – Manu

SVG过滤器会导致部件被剔除

回答

相关问题