在svg <path>上添加阴影
在svg <path>上添加阴影
提问于 2020-02-05 08:55:40
我试图在svg的某个特定部分放置一个现代阴影。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
我试过使用过滤器，但边缘是可见的，而且太模糊了：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 162 63.25">
<g style="isolation:isolate">
<g>
<g>
<filter id="dropshadow" x="-2" y="-2" width="200" height="200">
<feGaussianBlur stdDeviation="1"/>
</filter>
<path d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<path style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2; filter: url('#dropshadow');" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
我希望使用一些现代的css阴影(https://codepen.io/sdthornton/pen/wBZdXq)，而不裁剪原始的svg。我也希望在上面少使用阴影。
Stack Overflow用户
回答已采纳
发布于 2020-02-05 09:06:51
我相信这就是你想要的，你可以改变过滤器中的值来满足你的需要。
用简单的话来说，不是为了使事物完整：
feOffset：x，y来回移动模糊阴影效应。filter：上下移动的高度
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
<g style="isolation:isolate">
<g>
<g>
<defs>
<filter id="dropshadow" height="122%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
<feOffset dx="1" dy="1" result="offsetblur" />
<feFlood flood-color="#3D4574" flood-opacity="0.3" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
</filter>
</defs>
<use xlink:href="#path1" filter="url(#dropshadow)"></use>
<path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
<use xlink:href="#path2" filter="url(#dropshadow)"></use>
<path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
</g>
</g>
</g>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60072137
复制相关文章
相似问题
腾讯云开发者
