在SVG對象標籤中選擇數據屬性

我有一個相對較大的SVG文件，以至於我不想將整個XML代碼放到我的html文件中。因此，我一直使用對象標籤來引用它並實現諸如在css中更改透明度等效果。但是，我現在想用一些javascript來選擇這個對象元素，當點擊時，更改數據屬性以加載不同的SVG文件（實質上在圖像間交替）。在SVG對象標籤中選擇數據屬性

這是一個簡單的操作，使用普通的img標籤，但同樣的方法似乎不使用對象標籤。

這是我到目前爲止有：

<div class="title-bar"> 
     <h1 class="heading">A Gathering of ...</h1> 
     <object id="trooper" data="images/trooper.svg" type="image/svg+xml"></object> 
</div>

對於HTML，以及JavaScript的：

addEventListener("load", start); 
// else { attachEvent("onload", start); } 

function start(){ 
    var logo = document.querySelector("#trooper"); 
    logo.addEventListener("click", logoChange); 
} 

function logoChange(){ 
    console.log("Clicked"); 
    var src = this.getAttribute("data"); 

    if(src === "images/trooper.svg"){ 
     this.setAttribute("data", "images/rebel.svg"); 
    } else { 
     this.setAttribute("data", "images/trooper.svg"); 
    } 
}

感謝

來源

2016-03-07 ultrablue

它應該工作。你嘗試過其他UA嗎？ –

我只想用img標籤，避免對象（不知道目前的狀態，但是當我幾年前混亂圍繞它與Flash ......奇怪的事情發生了相當過於頻繁）：

<img src="images/trooper.svg"></img>

的則只需更改源喜歡你用來做...

（但你不能有JS裏面你SVG與IMG）

來源

2016-03-07 22:47:06 Hutzlibu

問題是你正在使用這個logoChange內功能。您將不得不使用標誌變量獲取和設置值。

來源

2016-03-07 22:37:50

最初我確實有過，但它也無法工作。我認爲這個問題似乎與實際選擇標誌有關。起初我也使用getElementById，但無濟於事。 – ultrablue

對不起，看看hutzlibu不得不說的 –

在SVG對象標籤中選擇數據屬性

回答

相關問題