CSS SVG фильтр: отлично работает :hover на localhost, и не работает на хостинге. В чем дело?

Question

[evil_eyes]

Всем привет!
Такая проблема: есть svg элемент, по :hover в CSS к нему применяется filter, заданный в теле index.html
Использую browsersync на gulp, на localhost все работает как надо, но, залив файлы на хостинг, эффект ведет себя как-то не так - при наведении на элемент, он тупо исчезает. В чем причина? Почему на localhost все работает как надо, а на серваке уже нет?
Ниже куски кода и jsfiddle (на котором, кстати, тоже не работает как надо)
И сразу еще вопрос: может кто знает как сделать лучше этот эффект, чтоб работал на всех браузерах? Пробовал c jQuery по hover присваивать элементу по id стить style="filter: url(#whiteglow)", но тоже работает коряво.

Кусок кода из шапки, думал поможет:

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

Часть кода из 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>

Часть из CSS:

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

И ссылка на jsfiddle: https://jsfiddle.net/evileye/1daafqde/

Answer 1

[Mike]

добавь точку перед хешем, т.к #whiteglow это относительная ссылка

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);
}

Comments

[evil_eyes]

Большое спасибо! Я себе уже всю голову сломал :) Этот совет помог решить проблему в chrome & opera, ff 50.0.2 по-прежнему ведет себя также, буду думать дальше, как побороть его.

[Mike]

evil_eyes: получилось?)

[evil_eyes]

Михаил Косулин: получилось да не так :) сделал всё, минуя CSS. Как я понял, прочитав кучу статей и обсуждений, браузеры пока не совсем правильно обрабатывают svg&css. Я сделал всё через JS. SVG инлайново.