Question

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

因此，应用蒙版似乎可以以某种方式渲染先前的“图像”。有办法避免这种情况吗？如果没有，还有其他选择吗？

<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>

Answer 1

只要把口罩变大。

最好使过滤器更小。巨大的滤镜大小是为什么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>

用模糊遮罩SVG会产生难看的结果

1 个答案: