動態替換svg中的圖像元素

我想替換svg標籤的圖像元素。我希望每次調用controller.js中保存圖像的對象時，我都會採用此圖像，並通過svg在不同的文件中將此圖像表示爲模糊背景圖像，稱爲default.js。動態替換svg中的圖像元素

我應該怎麼做？

default.html中：

<div id="backgroundImage"> 
     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
      <defs> 
       <filter id="myGaussianBlur" x="0" y="0"> 
        <feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur> 
       </filter> 
      </defs> 
      <image id="backImage" xlink:href="surf.jpg" width="100%" height="100%" preserveAspectRatio="none" filter="url(#myGaussianBlur)" /> 
     </svg> 
    </div>

我想，以取代在其它圖像的圖像ID = 「backImage」的形象。

Controller.js：

function setObject(element, value) { 
    var id = value.id; 
    var image = value.image; 
    ???? 
}

感謝

來源

2012-10-07 Aviade

儘量利用原生 '的setAttribute' 的。

var im = document.getElementById('backImage'); 
im.setAttribute('xlink:href',"http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/s480x480/525959_10151097048652029_155651648_n.jpg"); 
// or mby more correct approach: 
// im.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/s480x480/525959_10151097048652029_155651648_n.jpg"); 
im.setAttribute('width', X); 
im.setAttribute('height', Y);

它可以在鉻，我只知道=）

來源

2012-10-07 10:07:17 mschr

不能使用的setAttribute在XLink命名空間來設置的屬性。如果它在Chrome中運行，則應該將其報告爲一個錯誤。你應該使用setAttributeNS（「http://www.w3.org/1999/xlink」，「xlink：href」，<屬性值>）而不是 –

好點，回覆讚揚 – mschr

Woow !!它的工作！謝謝！！！ – Aviade

動態替換svg中的圖像元素

回答

相關問題