时间戳

首页 > 解决方案 > 用模糊掩盖 SVG 会产生丑陋的结果

svg - 用模糊掩盖 SVG 会产生丑陋的结果

问题描述

我有矩形/路径作为具有发光效果的矩形。只要我不遮盖内部部分（即隐藏矩形内部的填充或发光），它就可以很好地工作。遮蔽部分对象会产生一些先前平滑发光的丑陋效果。

因此，应用蒙版似乎会以某种方式呈现以前的“图像”。有没有办法避免这种情况？如果没有，有替代方案吗？

<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <defs>

      <filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
          <feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
          <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
          <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
          <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
          <feMerge>
              <feMergeNode in="blurred"></feMergeNode>
              <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
      </filter>
      
     
      <mask id="Mask1">
        <rect x="-100" y="-100" width="250" height="250" fill="white"  />
        <rect x="3" y="3" width="34" height="34" fill="black"  />
      </mask>
        
     <mask id="Mask2">
        <rect x="-100" y="-100" width="250" height="250" fill="white"  />
        <rect x="3" y="3" width="34" height="34" fill="black"  />
      </mask>
        
    </defs>
    
    <g transform="translate(20,20)">
        <rect x="0" y="0"  width="40" height="40" fill="#00e4ff"/>
        
        <rect transform="translate(60,0)" x="0" y="0"  width="40" height="40"
              fill="#00e4ff" style="filter:url(#cyan-glow)"/>
        
        <rect transform="translate(120,0)" x="0" y="0"  width="40" height="40"
              fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
     
        <path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" fill="none"/>
     
        <path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>

        <path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
    </g>
    </svg>

标签： svgsvg-filters

解决方案

把口罩弄大点就好了。

你最好把过滤器做得更小。巨大的过滤器尺寸是为什么您的 SVG 渲染速度非常慢的原因。

<svg id="button-glow" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <defs>

      <filter id="cyan-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
          <feFlood result="flood" flood-color="#00e4ff" flood-opacity="1"></feFlood>
          <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
          <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
          <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
          <feMerge>
              <feMergeNode in="blurred"></feMergeNode>
              <feMergeNode in="SourceGraphic"></feMergeNode>
          </feMerge>
      </filter>
      
     
      <mask id="Mask1" x="-40%" y="-40%" width="180%" height="180%">
        <rect x="-100" y="-100" width="250" height="250" fill="white"  />
        <rect x="3" y="3" width="34" height="34" fill="black"  />
      </mask>
        
     <mask id="Mask2" x="-40%" y="-40%" width="180%" height="180%">
        <rect x="-100" y="-100" width="250" height="250" fill="white"  />
        <rect x="3" y="3" width="34" height="34" fill="black"  />
      </mask>
        
    </defs>
    
    <g transform="translate(20,20)">
        <rect x="0" y="0"  width="40" height="40" fill="#00e4ff"/>
        
        <rect transform="translate(60,0)" x="0" y="0"  width="40" height="40"
              fill="#00e4ff" style="filter:url(#cyan-glow)"/>
        
        <rect transform="translate(120,0)" x="0" y="0"  width="40" height="40"
              fill="#00e4ff" style="filter:url(#cyan-glow)" mask="url(#Mask1)"/>
     
        <path transform="translate(0,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" fill="none"/>
     
        <path transform="translate(60,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" style="filter:url(#cyan-glow)" fill="none"/>

        <path transform="translate(120,60)" d="M0,0 L40,0 L40,40 L0,40 z" stroke="#00e4ff"
              stroke-width="3" style="filter:url(#cyan-glow)" fill="none" mask="url(#Mask2)"/>
    </g>
    </svg>

推荐阅读