SVG：出现在图像顶部的过滤器

我有一个带有阴影的svg加载程序，但出于某种原因阴影出现在图像的顶部，实际上隐藏了它。有人能指出我要去哪里吗？SVG：出现在图像顶部的过滤器

<div class="loader"> 
    <div class="svg-favicon"> 
    <svg version="1.1" id="full_x5F_image" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="487.8 -92.9 467.7 372.9" style="enable-background:new 487.8 -92.9 467.7 372.9;" xml:space="preserve"> 
    <style type="text/css"> 
     .st0{fill:#FF002B;stroke:#000000;stroke-width:2;} 
     .st1{fill:dodgerblue;stroke:#000000;stroke-width:2;} 
     .st2{filter:url(#dropshadow);} 
     .st3{stroke-dasharray: 1900;stroke-dashoffset:1900} 
     /*.st3{stroke-dasharray: 1900;stroke-dashoffset:1900}*/ 
     .st4{stroke-dasharray: 900;stroke-dashoffset:900} 
     /*.st4{stroke-dasharray: 900;stroke-dashoffset:900}*/ 
    </style> 
    <filter height="130%" id="dropshadow"> 
     <fegaussianblur in="SourceAlpha" stddeviation="3"> 
     <feoffset result="offsetblur" dy="2" dx="0"> 
     <femerge> 
     <femergenode> 
     <femergenode in="SourceGraphic"> 
     </femergenode></femergenode></femerge> 
    </feoffset></fegaussianblur></filter> 
    <g> 
     <g> 
     <g> 
      <path id="letter" class="st2 st0 st4" d="M576.4,217.7L687.8,3.5h72.5l104.8,214.2h-68.9l-18.9-43.4H660.8l-20,43.4H576.4z M680.7,132.9h77 
      l-36.6-82.3L680.7,132.9z"/> 
     </g> 
     </g> 
    </g> 
    <path id="arc" class="st1 st3 st2" d="M911.6,267.7L911.6,267.7c19.8-35,36.3-74.4,39.4-117.9C960.1,22.9,849-78,723.2-78 
     S495.4,24,495.4,149.8c0,21.8,3.1,43,8.9,63c0.3,0.9-0.4,1.8-1.4,1.8h-11c-1.3,0-1.9,1.5-1,2.5l44.9,46.8c0.6,0.7,1.2,1.3,1.6,1.7 
     c0.3,0.3,0.6,0.6,0.8,0.6c-0.8-1.5-1.6-3.1-2.3-4.6c-2.5-5.9-7.3-17.2-11.2-27.5c-6.7-20.5-10.3-42.4-10.3-65.2 
     c0-128.4,114.7-230,247.3-207.8c87.7,14.7,156.8,83.8,171.4,171.5C941.4,181.8,932.6,228.4,911.6,267.7z"/> 
    </svg> 
    </div> 
</div>

这里是一个jsFiddle显示我的意思。如果您删除st2类，则可以看到实际的颜色。

来源

2017-05-24 Jeremy Thomas

请正确处理您的过滤器原语。非Chrome浏览器将反对所有小写字母。 XML区分大小写。 –

我对你的代码做了一些研究。您的阴影filter标记存在问题。请更正您的filter标记。这里是小提琴：https://jsfiddle.net/ejhs2ex8/

<filter height="130%" id="dropshadow"> 
     <feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur> 
     <feOffset result="offsetblur" dy="2" dx="0"></feOffset> 
     <feMerge> 
      <feMergeNode></feMergeNode> 
      <feMergeNode in="SourceGraphic"> 
     </feMergeNode></feMerge> 
    </filter>

来源

2017-05-24 18:06:36 Bhuwan

ahhhh谢谢！ –

SVG：出现在图像顶部的过滤器

回答

相关问题