Question

所以我的网站上有这个代码符号的svg，我想在svg上添加一个长长的阴影。我试过使用filter：drop-shadow（），但是它只允许一个偏移量，我正在寻找与box-shadow相同的功能，在其中可以添加多个偏移量以形成长长的阴影。

我正在使用Sass进行样式设置，并创建了一个使框上的阴影变长的函数，然后使用mixin进行调用，但不幸的是，我找不到如何使用svg进行此操作。

有人解决吗？

Answer 1

不能完全确定长阴影的意思-但我假设您正在寻找挤压效果？您可以通过在SVG过滤器中执行多个偏移量-然后从CSS引用该过滤器来做到这一点。

.icon {
  width: 50px;
  height: 50px;
  filter: url(#long-shadow);
}

<img class="icon"  src="https://material.io/tools/icons/static/ic_icons_192px_light.svg">



<svg width="0px" height="0px">
<defs>
  <filter id="long-shadow" x="0%" width="130%" y="0%" height="130%">
    <feOffset dx="1" dy="1" result="layer1" in="SourceAlpha"/>
     <feOffset dx="1" dy="1" result="layer2" />
      <feOffset dx="1" dy="1" result="layer3" />
       <feOffset dx="1" dy="1" result="layer4" />
        <feOffset dx="1" dy="1" result="layer5" />
         <feOffset dx="1" dy="1" result="layer6" />
          <feOffset dx="1" dy="1" result="layer7" />
              
  <feMerge>

    <feMergeNode in="layer1"/>
    <feMergeNode in="layer2"/>
        <feMergeNode in="layer3"/>
            <feMergeNode in="layer4"/>
                <feMergeNode in="layer5"/>
                    <feMergeNode in="layer6"/>
                        <feMergeNode in="layer7"/>
                            <feMergeNode in="SourceGraphic"/>
  </feMerge>
  </filter>
</defs>
</svg>

SVG长阴影

1 个答案: