Создайте тень / контур равномерно вокруг элемента без эффекта размытия

Question

У меня есть элемент (скажем, иконка) неправильной формы.

Мне нужен какой-то контур вокруг него, который соответствует форме определенного цвета.Цвет этого контура должен быть равномерным вокруг фигуры, то есть иметь одинаковое расстояние от него везде и без градиента цвета.

Я обнаружил, что использовал опцию css filter: drop-shadow()

См.https://jsfiddle.net/m8w94qsz/3/

Однако сгенерированная тень либо имеет эффект размытия (первый пример), либо не размещается равномерно вокруг элемента (второй пример).

Есть ли способ достичь желаемогорезультат с CSS?

Answer 1

Интересный и полезный ответ @enxaneta вдохновил этот ответ

В приведенных ниже примерах используется более сложный набор фильтров.Но с помощью этой комбинации фильтров становится возможным регулировать толщину обводки, наличие или отсутствие зазора между рисунком и обводкой.

• Значок обводки красным без пробела

Обратите внимание на значение атрибута radius

      <feMorphology id="fm1" operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" >
      </feMorphology>           
          <feMorphology id="fm2" operator="dilate" in="SourceAlpha"
                        radius="0.01" result="e2" > 
            </feMorphology>             

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#groupborder');
}

<svg width="0" height="0">
<defs>
    <filter id="groupborder" filterUnits="userSpaceOnUse"
            x="-1%" y="-1%" width="360" height="360">
      <feMorphology id="fm1" operator="dilate" in="SourceAlpha"
                    radius="5" result="e1" >
      </feMorphology>			
		  <feMorphology id="fm2" operator="dilate" in="SourceAlpha"
						radius="0.01" result="e2" > 
			</feMorphology>				
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 1 0
                             0 0 0 0 0
                             0 0 0 0 0
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
</svg>
<div>
  <i class="my-icon"></i>
</div>

• Изменение толщины хода достигается изменением атрибута ralius =" 10 "

<feMorphology id="fm1" operator="dilate" in="SourceAlpha"
                    radius="10" result="e1" >       

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#groupborder');
}

<svg width="0" height="0">
<defs>
    <filter id="groupborder" filterUnits="userSpaceOnUse"
            x="-1%" y="-1%" width="360" height="360">
      <feMorphology id="fm1" operator="dilate" in="SourceAlpha"
                    radius="10" result="e1" >
      </feMorphology>			
		  <feMorphology id="fm2" operator="dilate" in="SourceAlpha"
						radius="0.01" result="e2" > 
			</feMorphology>				
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 1 0
                             0 0 0 0 0
                             0 0 0 0 0
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
</svg>
<div>
  <i class="my-icon"></i>
</div>

• Штрих Иконки с пробелом

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#groupborder');
}

<svg width="0" height="0">
<defs>
    <filter id="groupborder" filterUnits="userSpaceOnUse"
            x="-1%" y="-1%" width="360" height="360">
      <feMorphology id="fm1" operator="dilate" in="SourceAlpha"
                    radius="8" result="e1" >
      </feMorphology>			
		  <feMorphology id="fm2" operator="dilate" in="SourceAlpha"
						radius="4" result="e2" > 
			</feMorphology>				
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0.2 0
                             0 0 0 0.2 0
                             0 0 0 0.2 0
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
</svg>
<div>
  <i class="my-icon"></i>
</div>

Пример анимации

Чтобы привлечь внимание к значку, вы можете анимировать обводку.

<feMorphology operator="dilate" in="SourceAlpha"
                    radius="2" result="e2" > 
        <animate attributeName="radius" values="6;4;2;2;4;6" dur="1s" calcMode="discrete" repeatCount="indefinite" />
      </feMorphology> 

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#groupborder');
}

<svg width="0" height="0">
<defs>
    <filter id="groupborder" filterUnits="userSpaceOnUse"
            x="-20%" y="-20%" width="420" height="420">
      <feMorphology operator="erode" in="SourceAlpha"
                    radius="2" result="e1" >
			<animate attributeName="radius" values="2;4;6;6;4;2" dur="1s" calcMode="discrete" repeatCount="indefinite" />
      </feMorphology>			
      <feMorphology operator="dilate" in="SourceAlpha"
                    radius="2" result="e2" > 
		<animate attributeName="radius" values="6;4;2;2;4;6" dur="1s" calcMode="discrete" repeatCount="indefinite" />
      </feMorphology>				
      <feComposite in="e1" in2="e2" operator="xor"
                   result="outline"/>
      <feColorMatrix type="matrix" in="outline"
                     values="0 0 0 0 0
                             0 0 0 0.2 0
                             0 0 0 0.2 0
                             0 0 0 1 0" result="outline2"/>
      <feComposite in="outline2" in2="SourceGraphic"
                   operator="over" result="output"/>
    </filter>
  </defs>
</svg>
<div>
  <i class="my-icon"></i>
</div>

Answer 2

Вы можете использовать filter: url() с svg-фильтром, например:

svg{position:absolute; left:-10em;}
.my-icon {
  content: url('https://img.icons8.com/officel/344/arrow.png');
  filter: url('#outline');
}

<svg width="0" height="0">
<filter id="outline">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="red" result="red" />
<feComposite in ="red" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</svg>
<div>
  <i class="my-icon"></i>
</div>