在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对象标签中选择数据属性

回答

相关问题