JavaScriptで埋め込まれているとSVGフィルタが機能しない

Question

私は、要素を作成してJavaScriptで埋め込むときに、ぼかし効果を働かせようとしています。私は、ボケがなぜ現れないのか理解できません。私は標準のHTML & CSSとJavaScriptを使用して2つの手品を持っています。もし誰かがそれらをチェックし、私が間違っていることについての説明をしたいのであれば、本当に感謝します。

HTML & CSSバージョン（ワークス） https://jsfiddle.net/aaronbalthaser/xampLtnr/

HTML：

<div id="container"> 
    <img src="http://lorempixel.com/300/250/sports/" width="300" height="250" /> 
    <svg width="300" height="60" viewbox="0 0 300 60"> 
    <defs> 
     <filter id="blur"> 
     <fegaussianblur in="SourceGraphic" stddeviation="5" /> 
     </filter> 
    </defs> 
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/300/250/sports/" x="0" y="-190" height="250px" width="300px" /> 
    </svg> 
</div> 

CSS：

#container { 
    position: relative; 
    width: 300px; 
    height: 250px; 
    margin: 0 auto; 
    position: relative; 
} 

svg { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

JavaScriptのバージョン（動作しない） https://jsfiddle.net/aaronbalthaser/Lbnkfn02/

HTML：

<div id="container"> 
    <img src="http://lorempixel.com/300/250/sports/" width="300" height="250" /> 


</div> 

CSS：

#container { 
    position: relative; 
    width: 300px; 
    height: 250px; 
    margin: 0 auto; 
    position: relative; 
} 

svg { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

JS：

var width = 300; 
var height = 250; 
var viewbox = "0 0 300 60"; 
var namespace = 'http://www.w3.org/2000/svg' 
var path = 'http://lorempixel.com/300/250/sports/'; 
var container = document.getElementById('container'); 
var body = document.body; 

var svg = document.createElementNS(namespace,'svg'); 
svg.setAttribute('width', width); 
svg.setAttribute('height', 60); 
svg.setAttribute('viewBox', viewbox); 

var defs = document.createElementNS(namespace, 'defs'); 
var filter = document.createElementNS(namespace, 'filter'); 
filter.setAttribute('id', 'blur'); 

var feGaussianBlur = document.createElementNS(namespace, 'feGaussianBlur'); 
feGaussianBlur.setAttribute('in', 'SourceGraphic'); 
feGaussianBlur.setAttribute('stdDeviation', '5'); 

var image = document.createElementNS('http://www.w3.org/2000/svg', 'image'); 
image.setAttribute('filter', 'url(#blur)'); 
image.setAttribute('xlink:href', path); 
image.setAttribute('x', + '0'); 
image.setAttribute('y', + '-190'); 
image.setAttribute('height', height + 'px'); 
image.setAttribute('width', width + 'px'); 

filter.appendChild(feGaussianBlur); 
defs.appendChild(filter); 
svg.appendChild(defs); 
svg.appendChild(image); 
container.appendChild(svg); 

console.log(container); 

Answer 1

image.setAttribute('xlink:href', path); 

はする必要があります

image.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', path); 

https://jsfiddle.net/Lbnkfn02/2/