Question

我有一个不规则形状的元素（比方说图标）。

我想要围绕它的某种轮廓，使其与某种颜色的形状保持一致。该轮廓的颜色必须均匀地围绕形状，即，到处的距离都相同，并且没有颜色梯度。

我发现正在使用css选项filter: drop-shadow()

但是，生成的阴影具有模糊效果（第一个示例），或者没有均匀地放置在元素周围（第二个示例）。

有什么方法可以用CSS达到预期的效果吗？

Answer 1

您可以将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>

Answer 2

一个有趣而有用的答案@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>

在元素周围均匀生成阴影/轮廓，而不会产生模糊效果

2 个答案:

示例动画