问带有radialGradient的SVG - mask feGaussianBlur
EN

Stack Overflow用户

提问于 2021-11-14 15:10:39

回答 1查看 112关注 0票数 2

我想要模糊图像的边角，同时保留清晰的中心。使用css backdrop-blur()是不可能的，因为Firefox不支持它。在模糊的图像上添加一个清晰的图像，然后遮蔽第一个图像也是不可行的，因为最后我想用一个three.js场景来改变静态图像。

我试图跟随this tutorial，但使用的是径向渐变，而不是固定的条形图。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <filter id="blurlayer" width="100%" height="100%">
            
          <feGaussianBlur stdDeviation="4" result="blur"/>
            
          <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
            <stop offset="0%" stop-color="white" stop-opacity="1" />
            <stop offset="100%" stop-color="black" stop-opacity="0" />
          </radialGradient>
            
          <feComposite in="blur" in2="mask" operator="in" result="comp" />
            
          <feMerge result="merge">
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="comp" />
          </feMerge> 
        </filter>
      </defs>

      <image filter="url(#blurlayer)" x="0" y="0" width="100%" height="100%"   xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg"/>
    </svg>

它不起作用。有人能帮我找出原因吗？我设置了一个codepen，如果对任何人有帮助的话。

编辑:虽然答案有效，但现在我已经实现了它，我想警告其他所有人:在火狐上，这会使我的Three.js场景变得缓慢(尽管我测试的所有其他浏览器似乎都很好)。

svg

svg-filters

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-15 03:44:42

你还需要做更多的工作--你不能把滤镜放在滤镜中间--滤镜内部只允许有滤镜原语，而且你需要通过feImage导入任何你想要使用的图像/形状。

此外，当通过feComposite/in进行遮罩时- "in“操作符仅使用alpha通道(与使用亮度的实际遮罩不同)-因此您可以使用具有可变不透明度的黑色/黑色渐变。

最后，因为火狐不支持feImage内部的片段标识符，如果你想要FF支持，你必须在内容中定义你的掩码，并通过feImage导入你想要使用的图像。这使得过滤器不能重用，但如果这是一次关闭内容，这是很好的。如果您确实希望更广泛地使用此过滤器，那么可以定义一个渐变填充的矩形，然后将其转换为完整的SVG图像，然后通过feImage中的data:uri内联该图像。这是更多的工作(我似乎总是得到错误的svg+xml数据URI的转义规则)-所以我没有在这里做。

FWIW -该教程既完整又正确。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        
        <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask">
            <stop offset="0%" stop-color="black" stop-opacity="1" />
            <stop offset="100%" stop-color="black" stop-opacity="0" />
        </radialGradient>
            
        
        <filter id="blurlayer" x="0%" y="0%" width="100%" height="100%">
          <feImage xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg" width="100%" height="100%" result="original-image" preserveAspectRatio="none"/>         
          <feComposite in="original-image" in2="SourceGraphic" operator="in" result="unblurred" />  
          
     <feGaussianBlur in="original-image" stdDeviation="4" result="blurred-image"/>
          <feComponentTransfer in="SourceGraphic" result="invertlight">
                <feFuncA type="table" tableValues="1 0"/>
          </feComponentTransfer>
          <feComposite in="blurred-image" operator="in"/>
          
          <feComposite operator="over" in="unblurred"/>
        </filter>
      </defs>
  
<g filter="url(#blurlayer)">
      <rect fill="url(#radialGradient)" x="0" y="0" width="100%" height="100%"/>
</g>
    </svg>

更新:这是data:uri版本的样子：(请注意，我必须稍微扩大过滤内容的大小，以便过滤器可以裁剪反转导致的边缘工件)。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
      <defs>        
        <filter id="blurlayer" x="0%" y="0%" width="100%" height="100%">
          <feImage xlink:href='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIj48ZGVmcz4gICAgICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibXlHcmFkaWVudCIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAlIiBmeD0iNTAlIiBmeT0iNTAlIiByZXN1bHQ9Im1hc2siPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9ImJsYWNrIiBzdG9wLW9wYWNpdHk9IjEiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJibGFjayIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAlIiB5PSIwJSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNteUdyYWRpZW50KSIvPjwvc3ZnPg==' width="100%" height="100%" result="blur-mask" preserveAspectRatio="none"/>
      <feComposite in2="blur-mask" in="SourceGraphic" operator="in" result="unblurred" /> 
     <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blurred-image"/>
          <feComponentTransfer in="blur-mask" result="invertlight">
             <feFuncA type="table" tableValues="1 0"/>
          </feComponentTransfer>
          <feComposite in="blurred-image" operator="in"/>
          <feComposite operator="over" in="unblurred"/>
      </filter>
</defs>
  
  <g filter="url(#blurlayer)">
      <image xlink:href="https://www.wildtextures.com/wp-content/uploads/wildtextures-grey-felt-texture.jpg" x="-5%" y="-5%" width="110%" height="110%" preserveAspectRatio="none"/> 
</g>
    </svg>

data:uri是这个SVG的base64编码版本。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 100 100" height="100%" width="100%"><defs><radialGradient id="myGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" result="mask"><stop offset="0%" stop-color="black" stop-opacity="1" /><stop offset="100%" stop-color="black" stop-opacity="0"/>
</radialGradient></defs><rect x="0%" y="0%" width="100%" height="100%" fill="url(#myGradient)"/></svg>