БЛОГ НА HUSL


Как обвести текст с помощью фильтра SVG feMorphology?

Автор вопроса: Nadya Wilde

Есть ли возможность обвести буквы в тексте с помощью feMorphology?
Нужно обвести буквы ярко, но если вставлять фильтр на текст, то он обводит саму рамку и gifка пропадает.

svg{
            background-color:#2C3E50;
        }
 <svg width="560" height="600">  
        
        <defs>  
          <mask id="text-mask-1" x="0" y="0" width="900" height="600">  
            <text x="100" y="140" font-family="Helvetica" font-weight="bold" font-size="7em" fill="#999"  stroke="red" stroke-width="5.5">Вода</text>  
          </mask>  
        </defs>
       
        <image width="800" height="580" x="20" y="25" xlink:href="https://media.giphy.com/media/Gy4X3RLccwEIU/giphy.gif" mask="url(#text-mask-1)"/>  
        
        <text x="210" y="270" font-family="Helvetica" font-weight="bold"  font-size="70px"  stroke="grey" stroke-width="5.5" fill="none"> VS</text>



        <defs> 
                         
            <mask id="text-mask-2" x="0" y="0" width="900" height="600" stroke="red" stroke-width="5.5">  
              <text x="80" y="400" font-family="Helvetica" font-weight="bold" font-size="7em" fill="lightgrey" >Огонь </text>  
            </mask>  
          </defs>
         
          <image width="800" height="580" x="20" y="25"  xlink:href="https://media.giphy.com/media/6wpHEQNjkd74Q/giphy.gif" mask="url(#text-mask-2)"/>  
          
         
       </svg>


Источник

Ответы (2 шт):

Автор решения: UModeL

Не совсем понятно, как в вашем случае должен "ярко" сработать <feMorphology>... Но, если Вам нужно повысить контрастность обводки, то разность яркости fill и stroke для текста должна дать искомый результат (добавил пару фильтров и ползунки для fill и stroke):

svg { background-color: #2C3E50; }
FILL<input type="range" oninput="document.querySelector('svg').style.setProperty('--fill-color', 'hsl(0, 0%, ' + this.value + '%)')">
STROKE<input type="range" oninput="document.querySelector('svg').style.setProperty('--stroke-color', 'hsl(0, 0%, ' + this.value + '%)')">

<svg width="560" height="600">

  <filter id="oreol">
    <feGaussianBlur stdDeviation="10" in="SourceAlpha"/>
    <feOffset dx="0" dy="0" result="offsetblur"/>
    <feFlood flood-color="#aaa"/>
    <feComposite operator="in" in2="offsetblur"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

  <defs>  
    <mask id="text-mask-1" x="0" y="0" width="900" height="600">  
      <text x="100" y="140" font-family="Helvetica" font-weight="bold" font-size="7em" fill="var(--fill-color, #888)" stroke="var(--stroke-color, #fff)" stroke-width="5.5" filter="url(#oreol)">Вода</text>  
    </mask>  
  </defs>
  <image width="800" height="580" x="20" y="25" xlink:href="https://media.giphy.com/media/Gy4X3RLccwEIU/giphy.gif" mask="url(#text-mask-1)"/>
  
  <text x="210" y="270" font-family="Helvetica" font-weight="bold"  font-size="70px"  stroke="#fff2" stroke-width="5.5" fill="none">VS</text>
  
  <defs>       
    <mask id="text-mask-2" x="0" y="0" width="900" height="600">  
      <text x="80" y="400" font-family="Helvetica" font-weight="bold" font-size="7em" fill="var(--fill-color, #888)" stroke="var(--stroke-color, #fff)" stroke-width="5.5" filter="url(#oreol)">Огонь</text>  
    </mask>  
  </defs>
  <image width="800" height="580" x="20" y="25"  xlink:href="https://i.stack.imgur.com/BLeLC.gif" mask="url(#text-mask-2)"/>
  
</svg>

→ Ссылка
Автор решения: Alexandr_TT

Есть ли возможность обвести буквы в тексте с помощью feMorphology?

Решение с помощью фильтра feMorphology и feColorMatrix

<filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.5
                             0 0 0 0 0.8
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>

Изменяя значения параметров radius и коэффициентов в матрице фильтра feColorMatrix можно получить обводку текста самых различных видов.

Убрал из определения маски stroke="red" stroke-width="5.5" так как это лишнее и не работает. Эти параметры нужно применять к элементам, входящим в маску text, rect, а не к самой маске.

<style>
svg{background-color:#2C3E50;}
</style>        
 <svg width="560" height="600">  
   <defs>  
          <mask id="text-mask-1" >  
             <rect width="100%" height="100%" fill="black" />
            <text x="100" y="140" filter="url(#outText)"  font-family="Helvetica" font-weight="bold" font-size="7em" fill="white"  >Вода</text>  
          </mask>  
        </defs>
        <image width="200%" height="150%"  xlink:href="https://media.giphy.com/media/Gy4X3RLccwEIU/giphy.gif" mask="url(#text-mask-1)"/>  
           <text x="210" y="270" font-family="Helvetica" font-weight="bold"  font-size="70px"  stroke="grey" stroke-width="5.5" fill="none"> VS</text>
        <defs> 
           <mask id="text-mask-2"  >  
                <rect width="100%" height="100%" fill="black" />
              <text x="80" y="400" filter="url(#outText)"  font-family="Helvetica" font-weight="bold" font-size="7em" fill="white" >Огонь </text>  
            </mask>  
          </defs>
      <defs>
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.5
                             0 0 0 0 0.8
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
         
          <image width="800" height="580" x="20" y="25"  xlink:href="https://i.stack.imgur.com/BLeLC.gif" mask="url(#text-mask-2)"/>  
       </svg>

Вот ещё пример, показывающий возможности SVG фильтров.
Я заменил в матрице фильтра feColorMatrix только одно значение в последней строке, в последнем параметре 0 на 0.3

<style>
svg{background-color:#2C3E50;}
</style>        
 <svg width="560" height="600">  
   <defs>  
          <mask id="text-mask-1" >  
             <rect width="100%" height="100%" fill="black" />
            <text x="100" y="140" filter="url(#outText)"  font-family="Helvetica" font-weight="bold" font-size="7em" fill="white"  >Вода</text>  
          </mask>  
        </defs>
        <image width="200%" height="150%"  xlink:href="https://media.giphy.com/media/Gy4X3RLccwEIU/giphy.gif" mask="url(#text-mask-1)"/>  
           <text x="210" y="270" font-family="Helvetica" font-weight="bold"  font-size="70px"  stroke="grey" stroke-width="5.5" fill="none"> VS</text>
        <defs> 
           <mask id="text-mask-2"  >  
                <rect width="100%" height="100%" fill="black" />
              <text x="80" y="400" filter="url(#outText)"  font-family="Helvetica" font-weight="bold" font-size="7em" fill="white" >Огонь </text>  
            </mask>  
          </defs>
      <defs>
    <filter id="outText" 
            x="-20%" y="-20%" width="300%" height="300%">
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" />
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="1" result="e2" />
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0.2
                             0 0 0 0 0.5
                             0 0 0 0 0.8
                             0 0 0 1 0.3" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
         
          <image width="800" height="580" x="20" y="25"  xlink:href="https://i.stack.imgur.com/BLeLC.gif" mask="url(#text-mask-2)"/>  
       </svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.