Фильтр SVG работает только при добавлении в атрибут стиля (Firefox)

Я добавил эффект размытия svg в свой HTML (текст/html):

<html>
    <head>...</head>
    <body>
        ...
        <svg xmlns="http://www.w3.org/2000/svg" height="0">
            <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
                 <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
            </filter>
        </svg>
    </body>
</html>

На что я ссылаюсь в своем листе CSS:

#page-container {
    filter: url("#svgBlur");
    -webkit-filter: blur(8px);
}

При этом #page-container становится белым (FF не распознает фильтр SVG).

Причудливая часть:

Когда я отключаю вышеуказанное правило фильтрации в Firebug и читаю его в атрибуте стиля #page-container, оно работает как шарм.

<div id="page-container" style="filter: url("#svgBlur");">

Что я наблюдаю?

Заголовки ответа:

Cache-Control   no-cache, must-revalidate, post-check=0, pre-check=0
Connection  Keep-Alive
Content-Encoding    gzip
Content-Language    nl
Content-Length  6098
Content-Type    text/html; charset=utf-8
Date    Mon, 02 Dec 2013 14:47:01 GMT
Etag    "1385995621"
Expires Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive  timeout=15, max=100
Last-Modified   Mon, 02 Dec 2013 14:47:01 +0000
Link    </nl/node/215271>; rel="canonical",</nl/node/215271>; rel="shortlink"
Server  Apache/2.2.3 (Red Hat)
Vary    Accept-Encoding
X-Powered-By    PHP/5.3.19

Problem on Firefox 25 OSX. Webkit browsers work fine, because they use the css blur filter


svg html css firefox svg-filters
person Martijn Dierckx    schedule 02.12.2013    source источник

Ответы (7)


arrow_upward
20
arrow_downward

#svgBlur — это относительный URL. Он преобразуется в абсолютный URL-адрес путем добавления имени файла, в котором он находится, поэтому

filter: url("#svgBlur");

в вашем случае это просто сокращение для

filter: url("stylesheet.css#svgBlur");

Который ни на что не указывает.

Вам нужно поместить имя html файла в URL

filter: url("yourhtmlfile.html#svgBlur");

заработает. И именно поэтому он работает, когда он находится в html-файле, поскольку в этом случае добавленное имя файла указывает на нужное место.

person Robert Longson    schedule 02.12.2013
comment
См. комментарий Джоша Пауэлла. Я имею в виду фильтр svg, который включен в мой HTML. И что должно работать нормально - person Martijn Dierckx; 02.12.2013
comment
Мой HTML-код примерно выглядит примерно так: - person Martijn Dierckx; 02.12.2013
comment
Стили определены в отдельном файле css, который включается ссылкой ‹rel=... /› SVG и #page-container находятся в одном файле. - person Martijn Dierckx; 02.12.2013
comment
Чтобы было ясно, если строка filter: url("#svgBlur"); не находится в том же файле, что и элемент svg, вам нужно будет добавить имя файла svg/HTML к URL-адресу. Так ли это? - person Robert Longson; 02.12.2013
comment
Идеальный ответ - это сводило меня с ума в течение нескольких часов! - person Steve Eynon; 18.08.2014
comment
+1 - Также, если это кому-то поможет, у меня filter: url(".#svgBlur"); работало в firefox. - person zelanix; 27.10.2014

arrow_upward
7
arrow_downward

Я включил svg как строку base64 непосредственно в файл css. Это решило мою проблему.

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)
person Martijn Dierckx    schedule 02.12.2013
comment
Хорошо работает в Firefox, но не работает в Chrome из-за этой ошибки. Обратите внимание, что uri данных в этом контексте является внешней ссылкой. Вероятно, также существует во всех браузерах webkit, поскольку там также упоминается ошибка webkit. - person harmic; 12.10.2015
comment
Обратите внимание, что встроенный SVG в filter может дать сбой, если вы используете Content-Security-Policy (CSP), потому что ожидаемое поведение плохо определено. Подробности см. на странице bugzilla.mozilla.org/show_bug.cgi?id=878608 — плохая часть в том, что если это произойдет с Firefox, элемент с filter сразу же станет прозрачным на 100%, а фильтр не будет работать! - person Mikko Rantalainen; 15.06.2021

arrow_upward
2
arrow_downward

Моя проблема, которая привела меня сюда, заключалась в том, что я спрятал SVG внутри div с «display: none», встроенным в класс.

person theGleep    schedule 12.06.2017

arrow_upward
1
arrow_downward

В фаерфоксе вроде нормально работает

HTML

<svg xmlns="http://www.w3.org/2000/svg" height="0">
   <filter height="116%" width="116%" y="-8%" x="-8%" id="svgBlur">
       <feGaussianBlur stdDeviation="8" in="SourceGraphic"/>
   </filter>
</svg>
<div id="page-container">
   <img src="http://miriadna.com/desctopwalls/images/max/Fairy-forest.jpg" alt="forest" />
</div>

JSFIDDLE (с изображением в div)

JSFIDDLE (с фоновым изображением в div)

Вы включили код svg в свою html-разметку?

person Josh Powell    schedule 02.12.2013
comment
Да, я включил его незадолго до конца моего тела. Я добавил свой код на другую тестовую страницу, где он отлично работал. Но я не могу понять, что влияет на такое поведение... PS: я также пытался отключить все JS. Не работает - person Martijn Dierckx; 02.12.2013
comment
Хм, я не знаю, имеет ли значение размещение, но очень странно, что это работает на скрипке. Можете ли вы показать, как выглядит html на вашей странице с включенным svg? - person Josh Powell; 02.12.2013
comment
Я также добавил заголовки ответов в исходную проблему. - person Martijn Dierckx; 02.12.2013
comment
Я просмотрел ваш html и, похоже, в нем нет ничего плохого. - person Josh Powell; 02.12.2013
comment
Я попробовал точно такой же HTML в другом месте, и он отлично работает... Но я не могу понять здесь внешний фактор. - person Martijn Dierckx; 02.12.2013

arrow_upward
0
arrow_downward

Я пробовал все способы решить эту проблему, не создавая встроенный фильтр (со строкой base64 в css) из этой темы, включая использование полного пути к файлу .svg в url(), но только один метод решил эту проблему для меня. Firefox видит фильтр, только если вы применяете правило css в атрибуте стиля элемента или если вы определяете правила css во встроенном теге <style></style>.

person SkipIntro    schedule 08.12.2015

arrow_upward
0
arrow_downward

В моем случае Firefox не нашел фильтр SVG из-за правила CSS:

#svg-filters {
    display: none;
}

где svg-filters — это идентификатор тега <svg>, содержащего все определения фильтров. Заменил эти строки на

#svg-filters {
    position: absolute;
    height: 0;
    width: 0;
}

и фильтры нормально работают в ФФ.

Ссылки на фильтры относительно HTML-документа из CSS отлично работают в основных браузерах, как указал Джош Пауэлл в своем ответе.

person semyonfilippov    schedule 27.06.2020

arrow_upward
-3
arrow_downward

Что zelanix сказал выше... о добавлении файла . перед фильтром как в

.blur1 {
filter:url(.#blur1);
}

Делает трюк на 100% и работает во всех браузерах, насколько я могу судить

person Morten    schedule 11.12.2015