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

Я добавил эффект blur 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 и прочитал его в атрибуте style # 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

Ответы

Ответ 1

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

filter:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0ic3ZnQmx1ciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjgiLz48L2ZpbHRlcj48L3N2Zz4=#svgBlur)

Ответ 2

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

filter: url("#svgBlur");

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

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

Что не указывает на что-либо.

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

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

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

Ответ 3

Кажется, что отлично работает в firefox, например,

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?

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

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