svg - 新しい IMG をパターンとして SVG にロードする

Question

私のページには、3つのパスを持つSVG画像があり、反対側には3つのボタンがあります。各ボタンをクリックすると、SVG のパスにパターンを適用します。

スクリプトが完全に機能しませんでした。必要なコードをすべて追加して SVG 構造を更新しますが、結果として画像が失われます。

UPDATEここでデモ： http://jsfiddle.net/uncoke/756DS/

デバッグ時に新しい SVG コードをコピーして新しいウィンドウで開くと、必要な結果が表示されます。しかし、ライブでは... imgパターンをロードしません。ここに私のスクリプトの核心があります：

      var svgns = "http://www.w3.org/2000/svg";

var img = document.createElementNS(svgns,'image');
          img.setAttributeNS(null,'height','536');
          img.setAttributeNS(null,'width','536');
          img.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href',pattern_url);
          img.setAttributeNS(null,'x','-81');
          img.setAttributeNS(null,'y','-81');
          img.setAttributeNS(null, 'visibility', 'visible');  
          

          def= document.createElementNS(svgns,'defs');
  
          pattern = document.createElementNS(svgns,'pattern');


          pattern.setAttributeNS(null,'id','img_pattern');
          pattern.setAttributeNS(null,'patternUnits','userSpaceOnUse');
          pattern.setAttributeNS(null,'width','600');
          pattern.setAttributeNS(null,'height','450');
          
          pattern.appendChild(img)

          def.appendChild(pattern)
          
      
          side_1 = document.getElementById('side_1');
          side_1.setAttributeNS(null,"fill","url(#img_pattern)")
          
          side_2 = document.getElementById('side_2');
          side_2.setAttributeNS(null,"fill","green")
          
          side_3 = document.getElementById('side_3');
          side_3.setAttributeNS(null,"fill","url(#img_pattern)")

このテストでは、「塗りつぶし」、「緑」のみが機能します。

助けてもらえますか？