Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html SVG:出现在图像顶部的过滤器_Html_Css_Svg_Svg Filters - Fatal编程技术网

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

Html SVG:出现在图像顶部的过滤器,html,css,svg,svg-filters,Html,Css,Svg,Svg Filters,我有一个带有阴影的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

我有一个带有阴影的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>

这是我的意思。如果删除st2类,您可以看到实际的颜色。

我对您的代码做了一些研究。dropshadowfilter标记中存在问题。请更正您的筛选器标记。这是小提琴:


请正确区分过滤器原语的大小写。非Chrome浏览器将反对所有小写字母。XML区分大小写。
   <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>