Div исчезает после применения размытия по Гауссу SVG

Я пытаюсь применить размытие по Гауссу к элементу, у которого есть несколько дочерних узлов, содержащих некоторый контент.

Для Chrome я сделал в прикладном стиле:

    -webkit-filter: blur(2px);

Firefox не поддерживает это. Firefox поддерживает применение SVG к элементам. Зная это, я искал в Google пример, где объяснялось бы, как использовать SVG для применения размытия по Гауссу к элементу. Я нашел этот пример с эта демонстрация.

Я сварил следующий CSS:

    #div-with-content{
        -webkit-filter: blur(2px);
        filter: url('#blur');
    }

И поместите это в соответствующий файл HTML:

    <svg:svg>
        <svg:filter id="blur">
            <svg:feGaussianBlur stdDeviation="2"/>
        </svg:filter>
    </svg:svg>

Но когда я зашел проверить страницу, я увидел, что div-with-content там больше нет. Оно исчезло. Каждый раз, когда я удаляю стиль размытия из div-with-content, он появляется снова.

Может ли кто-нибудь помочь мне в этом, я действительно пробовал все, что мне известно.


svg html css firefox svg-filters
person Feanaro    schedule 20.02.2013    source источник
comment
Я думаю, что еще один способ добиться этого - добавить png с размытием поверх вашего элемента.   -  person dinodsaurus    schedule 20.02.2013
comment
Можете ли вы дать ссылку на свою страницу, которая показывает проблему? Обычно с SVG все исчезает, если вы пытаетесь применить сервер рисования, который на самом деле недействителен....   -  person Boris Zbarsky    schedule 20.02.2013
comment
@dinodsaurus Итак, вашим решением было бы, скажем, создать png 100px с размытием по Гауссу. Залейте фон слоя тем же png, а затем поместите слой поверх элемента?   -  person Feanaro    schedule 20.02.2013
comment
@BorisZbarsky Что вы подразумеваете под «сервером рисования, который на самом деле недействителен»? Вы имеете в виду, что часть <svg>...</svg> составлена ​​неправильно?   -  person Feanaro    schedule 20.02.2013
comment
Да, точно. Но трудно сказать, происходит это или нет, не видя всей страницы. Одна вещь, которую стоит попробовать навскидку, - это удалить все биты svg:, поскольку я не думаю, что они разрешены в сериализации HTML SVG.   -  person Boris Zbarsky    schedule 20.02.2013
comment
@BorisZbarsky Это ссылка на сайт. Это прототип и небольшой пробный графический интерфейс. Вам нужно войти в систему, прежде чем вы столкнетесь с тем, что я имел в виду, данные учетной записи могут быть любыми, которые вам нравятся.   -  person Feanaro    schedule 20.02.2013

Ответы (5)


arrow_upward
3
arrow_downward

Я не знаю, это ваши апострофы или ваш svg:, но эта версия отлично работает в Firefox:

CSS:
#div-with-content{
        filter: url("#blur");
    }


HTML:
<svg>
   <filter id="blur">
       <feGaussianBlur stdDeviation="2"/>
   </filter>
</svg>

<div id="div-with-content"> WOohooo</div>
person Michael Mullany    schedule 20.02.2013
comment
Я попробовал это в этом JFiddle, и, похоже, он работает отлично. Я взял кусок, который хотел бы размыть, на веб-сайте, чтобы провести водонепроницаемое сравнение. - person Feanaro; 21.02.2013
comment
Он работает в скрипте, потому что скрипт js использует <style>. Ваша страница, вероятно, помещает CSS во внешний файл CSS, на который ссылается <link>. Попробуйте поместить класс размытия в свой html-документ напрямую через <style>. - person James M. Lay; 03.01.2015
comment
Если вы хотите, чтобы он был внешним, это вполне возможно, но вы должны изменить его с #blur на любое имя вашего файла.html#blur - person Robert Longson; 09.01.2015

arrow_upward
2
arrow_downward

Если есть только текст, который вы хотите размыть, есть небольшая хитрость.

p{
   color: transparent;
   text-shadow: 0 0 4px #222;
}

Здесь вы можете увидеть, как это работает jsFiddle.

person dinodsaurus    schedule 20.02.2013
comment
Я тоже сталкивался с этим трюком, к сожалению, на div-with-content больше, чем просто текст. - person Feanaro; 20.02.2013

arrow_upward
0
arrow_downward

редактировать

Вы можете загрузить из внешнего документа< /a>, если этот документ исходит из того же источника, что и HTML-документ, к которому он применяется.

Убедитесь, что html-страница с эффектом svg передается в аргументе URL вместе с идентификатором эффекта svg (например,

Итак, вместо

url('#filter-effect')

do

filter: url('index.html#filter-effect')

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

-

Старый ответ:

Сеть разработчиков Mozilla говорит:

Вы можете указать SVG в стилях либо в том же документе, либо во внешней таблице стилей.

... но их полно. Отчет об ошибке?

используйте <style> вместо <link>

По непонятным мне причинам, если вы объявите класс .blur вне html-документа через <link>, ваш элемент исчезнет, ​​но все еще будет занимать место. Вот почему скрипки работают в других ответах, а реализация - нет. JSFiddle добавляет ваши стили в документ, используя <style>. Чтобы избежать такого поведения, вы должны вместо этого объявить класс .blur ВНУТРИ документа, он же <style>...</style>.

Также важно:

ПРИМЕЧАНИЕ. Пространство имен недопустимо в HTML5, не используйте svg: в тегах для документов в формате HTML.

Опять же, <style>, а не <link>.

источники:
метод проб и ошибок
mdn: Применение эффектов SVG к HTML содержание

person James M. Lay    schedule 03.01.2015
comment
Если вы пишете #xxx, это сокращение для ‹этого файла›#xxx и в вашей таблице стилей нет элемента размытия по Гауссу. Вот почему он исчезает, потому что соответствующие спецификации (SVG и CSS) говорят, что он должен указывать на ошибку. Если вы добавите имя своего html-файла к #xxx в таблице стилей, оно будет работать так, как вы этого хотите. - person Robert Longson; 09.01.2015
comment
Интересно, но я не понимаю, что представляет собой #xxx. Насколько я понимаю, вы имеете в виду, что перед правилами должно стоять имя файла, например <example.html>#blur-element { ... }? - person James M. Lay; 10.01.2015
comment
В случае с этим вопросом это #blur (я использовал xxx для обозначения того, что вы используете, поэтому в вашем случае xxx - это элемент размытия). #div-with-content{ filter: url(example.html#blur); } - person Robert Longson; 10.01.2015
comment
Хорошо, это имеет больше смысла. - person James M. Lay; 10.01.2015

arrow_upward
0
arrow_downward

Я видел такое же поведение с фильтром, который пытался использовать. Оказывается, я также установил SVG, где был определен фильтр, на display: none;. Как только я удалил это, фильтры стали доступны, и HTML-элементы, к которым они были применены, отображались правильно.

person Nathan Arthur    schedule 13.02.2019

arrow_upward
-2
arrow_downward

Это, вероятно, на 2 года позже, но вызов имени документа не сделал этого для меня, но размещение стиля непосредственно на элементе, как это, сработало отлично:

<div class="imageblur" style="filter:url(#blur) ">
person user3214617    schedule 14.05.2015