CSS SVG filter: :hover works fine on localhost, but doesn't work on hosted. What's the matter?

Question

css

Hello!
Such a problem: there is a svg element, according to :hover in CSS, the filter specified in the body of index.html
is applied to it - when hovering over an element, it stupidly disappears. What is the reason? Why does everything work as it should on localhost, but not on the server anymore?
Below are pieces of code and jsfiddle (on which, by the way, it also does not work as it should)
And immediately another question: maybe someone knows how to make this effect better so that it works on all browsers? I tried c jQuery on hover to assign the element by id style="filter: url(#whiteglow)", but it also works clumsily.
A piece of code from the header, I thought it would help:

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

Part of code from index.html:

<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>

Part of the CSS:

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

And a link to jsfiddle: https://jsfiddle.net/evileye/1daafqde/

Answer 1

add a dot before the hash because #whiteglow is a relative link

body {
background-color: black
}

svg {
  position: absolute;
  z-index: -1;
}

.st0 {
  fill:none;
  stroke:#fff;
  stroke-miterlimit:10;
}

.hexagon-fill {
  fill:#fff;
  stroke:#fff;
  stroke-miterlimit:10;
  fill-opacity:1 !important;
}

polygon.hexagon {
  cursor: pointer;
  fill:#fff;
  fill-opacity:0;
}
polygon.hexagon:hover {
  filter: url(.#whiteglow);
  filter: url(./#whiteglow);
}

#lang_EN,
#lang_RU,
#lang_ES {
  cursor: pointer;
}

#lang_EN:hover,
#lang_RU:hover,
#lang_ES:hover {
  filter: url(.#whiteglow);
  filter: url(./#whiteglow);
}