Динамическое введение фильтров SVG и применение к HTML

Question

Динамическое введение фильтров SVG и применение к HTML

Я играю с применением фильтров SVG к HTML. Это работает, если все жестко закодировано, хотя мне нужен идентификатор CSS -webkit-filter для chrome. При попытке создать элемент SVG с фильтром динамически с помощью javascript это не удается. Кто-нибудь может объяснить почему?

Вот что у меня есть до сих пор: http://jsfiddle.net/H3UX8/1/

Первая пара изображений и текста размыта в chrome и firefox, а вторая - нет.

Выписка не содержит работа:

.dynamic div {

    -webkit-filter: url('#f2');

    filter: url('#f2');

}



...



var svg = document.createElement("svg");

var filter = document.createElement("filter");

filter.setAttribute("id", "f2");

var blur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");

blur.setAttribute("stdDeviation", "5");

filter.appendChild(blur);

svg.appendChild(filter);

document.body.appendChild(svg);



...



<div class="dynamic">

    <div><img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" /></div>

    <div>HELLO WORLD TWO</div>

</div>

Синтаксис html выглядит идентично. Я предполагаю, что либо document.createElement не создает теги с поддержкой svg, либо идентификаторы фильтров считываются только один раз при загрузке документа. Я могу , однако, динамически изменять значение stdDeviation в статическом примере.

541 1

javascript html css svg svg-filters

1 ответ:

Comments

Ничего не найдено.

sbking · Accepted Answer · 2013-12-02 09:37:36

Попробуйте это:

var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS( NS, "svg" );

var filter = document.createElementNS( NS, "filter" );
filter.setAttribute( "id", "f2" );

var blur = document.createElementNS( NS, "feGaussianBlur" );
blur.setAttribute( "stdDeviation", "5" );

filter.appendChild( blur );
svg.appendChild( filter );
document.body.appendChild( svg );