CSS SVG过滤器问题：悬停效果在本地主机上运行良好，但在远程主机/服务器上不起作用

希望有人能帮我解决这个问题。。。 因此，我的index.html中有一个平静的标题：

<META HTTP-EQUIV="Content-type" CONTENT="application/xhtml+xml; UTF-8">

现在有趣的事情发生了！当我使用browsersync并在本地主机上查看我的索引html文件时：hover效果非常好

但是。在我将所有文件上传到web主机上后，所有浏览器中的：hover效果都会完全停止。所以当我把鼠标悬停在元素上时，它们就消失了，当我鼠标悬停在这些元素上之后，它们又回到了正常状态。我做了很多事情试图修复它，结果我的脑子都碎了。谁能帮帮我吗O

简言之：CSS:SVG元素上应用的悬停效果在localhost上非常有效，但在web服务器（主机）上不起作用。

另外，我有灰度滤镜，它能用。问题是：悬停效果在web服务器上不起作用，但在本地起作用

PSS。以下是JSFIDLE：

---

同样的行为

看起来路径不对删除前面的斜线它位于文档本身内部，无需查看它的位置这太棒了。。。你的小提琴在FF中工作，但是当我将它上传到我的网站上时，它不工作。你可以提供一个网站链接，这样我们可以将它与小提琴进行比较。看起来路径不对删除前面的斜线它位于文档本身内，无需去看它位于何处这太棒了。。。你的小提琴在FF中工作，但当我将它上传到我的网站上时，它不工作。你可以提供一个到网站的链接，以便我们可以将它与小提琴进行比较。

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 400" width="1600" height="800" style="enable-background:new 0 0 800 400;" xml:space="preserve">
  <defs>

    <filter id="whiteglow">
        <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
        <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
        <feMorphology in="mask" result="dilated" operator="dilate" radius="1"></feMorphology>
        <feGaussianBlur in="dilated" result="blurred" stdDeviation="1.33"></feGaussianBlur>
        <feMerge>
            <feMergeNode in="blurred"></feMergeNode>
            <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>

    <pattern id="pattern_EN" class="hexagon" width="100%" height="100%" x="0" y="0">
            <image xlink:href="images/lang_en.svg" width="29" height="29" x="-2.5" y="-1"/>
    </pattern>
</defs>    
        <polygon id="lang_EN" class="st0" style="fill: url(#pattern_EN);" points="18.81692,32.33173 6.81692,25.40353 6.81692,11.54712 18.81692,4.61892 30.81692,11.54712
            30.81692,25.40353"/>

</svg>

#lang_EN:hover
  filter: url(#whiteglow);
  filter: url(/#whiteglow);
}