SVG image blur на Firefox

Я пытаюсь размыть изображение на Firefox, используя предложенную технику SVG here.SVG image blur на Firefox

Однако этот очень простой пример не работает на Firefox (я версия 25) JSFiddle.

HTML

<img class="blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />

CSS

.blur { 
    filter: url("http://d2oujmlvvb0w9i.cloudfront.net/images/v4/blur.svg#blur")  
}

Любая помощь?
Спасибо

источник

2013-12-05 mottalrd

Firefox не поддерживает кросс фильтры происхождения содержимого HTML. Из соответствующего блоге:

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

источник

2013-12-05 18:03:35

Я использовал этот POST для создания эффекта размытия, но я добавил кодировку base64.

img.blur { 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    filter: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPGZpbHRlciBpZD0iYmx1ciI+DQoJCTxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjMiIC8+DQoJPC9maWx0ZXI+DQo8L3N2Zz4=#blur); 
}

DEMO

Код для SVG-файла

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="blur"> 
     <feGaussianBlur stdDeviation="3" /> 
    </filter> 
</svg>

источник

2013-12-05 15:33:42 Anon

Это действительно полезно, спасибо – mottalrd

SVG image blur на Firefox

ответ

Смежные вопросы