这是我的svg代码,当我添加css过滤器阴影时,图形上有不需要的边框阴影,但我在这里看不到代码片段。没有人能分辨出发生了什么事吗?
.shadow {
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 10px rgba(0,0,0,.8));
fill:white;
}
<div style="background:gray; height:500px;">
<svg version="1.1" id="Layer_1" width=300px class="shadow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56.69 56.69" xml:space="preserve">
<g>
<path d="M32.61,29.55V22.8c0-0.42-0.35-0.77-0.77-0.77h-2.53V7.13h3.21c1.22,0,3.67-2.38,3.67-5.53c0-0.42-0.35-0.77-0.77-0.77
H22.08l-0.64,0.03c-0.41,0.02-0.73,0.36-0.73,0.77c0,2.89,2.14,5.16,2.23,5.27c0.14,0.15,0.35,0.24,0.56,0.24h4.25v14.89h-2.52
c-0.42,0-0.77,0.35-0.77,0.77v6.74c-2.08,1.36-3.36,3.69-3.36,6.18c0,4.09,3.34,7.42,7.42,7.42s7.41-3.34,7.41-7.42
C35.96,33.24,34.68,30.92,32.61,29.55z M23.86,5.59c-0.4-0.5-1.29-1.73-1.53-3.2h12.26c-0.31,1.89-1.69,3.09-2.1,3.2H23.86z
M26.02,23.57h5.05v5.8h-5.05V23.57z M28.55,41.6c-3.24,0-5.88-2.63-5.88-5.88c0-1.92,0.96-3.71,2.52-4.8
c0.02,0,0.03,0.01,0.05,0.01h6.6c0.02,0,0.03-0.01,0.04-0.01c1.57,1.09,2.53,2.88,2.53,4.8C34.41,38.96,31.78,41.6,28.55,41.6z"/>
<path d="M30.76,44.45c-0.42,0.04-0.73,0.42-0.69,0.85l0.92,9.01h-5.36l0.39-9.07c0.02-0.42-0.31-0.78-0.74-0.81
c-0.44-0.03-0.78,0.31-0.81,0.74l-0.43,9.87c-0.01,0.21,0.07,0.41,0.22,0.57c0.14,0.15,0.35,0.24,0.56,0.24h7.02
c0.22,0,0.42-0.09,0.58-0.26c0.14-0.17,0.22-0.38,0.2-0.6l-1.01-9.87C31.56,44.71,31.17,44.4,30.76,44.45z"/>
</g>
</svg>
</div>
我发现了这个问题!在我的最后,我使用.shadow,它与bootstrap样式属性同名,所以它也触发bootstrap样式。