Inyección dinámica de filters SVG y aplicación a HTML

Estoy jugando con la aplicación de filters SVG a HTML. Esto funciona si todo está codificado, aunque necesito el -webkit-filter CSS del -webkit-filter para Chrome. Al intentar crear un elemento SVG con un filter dinámicamente con javascript, falla. ¿Alguien puede explicar por qué?

Esto es lo que tengo hasta ahora: http://jsfiddle.net/H3UX8/1/

El primer par de imágenes y text se ve borroso en Chrome y Firefox, pero el segundo par no.

El extracto no funciona:

 .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://img.javascriptes.com/javascript/Lenna.png" /></div> <div>HELLO WORLD TWO</div> </div> 

La syntax html parece idéntica. Supongo que document.createElement no crea tags compatibles con svg o que las ID de filter solo se leen una vez en la carga del documento. Sin embargo, puedo cambiar dinámicamente el valor de stdDeviation en el ejemplo estático.

    One Solution collect form web for “Inyección dinámica de filters SVG y aplicación a HTML”

    Prueba esto:

     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 ); 
    Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.