Маскирование 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>

Что именно вы имеете в виду под «уродливым эффектом»?

Robert Longson 31.10.2018 12:32

Градиент обрезается наполовину по краям. Я ожидал, что он сгладится так же, как и без маски. С x="-100" y="-100" width="250" height="250" я считал маску достаточно широкой ...

B748 31.10.2018 12:59
0
2
152
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Большое спасибо, что сделали это! Так же доработаю фильтр по вашему совету!

B748 31.10.2018 13:15

Другие вопросы по теме