Question

我有一个相对较大的SVG文件，以至于我不想将整个XML代码放入我的html文件中。因此，我一直在使用对象标签来引用它并实现诸如更改css内的透明度等效果。

但是，我现在想使用一些javascript来选择这个对象元素，当点击时，更改数据属性以加载不同的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");
    }
}

由于

Answer 1

问题是你在logoChange函数中使用了这个。您必须使用徽标变量来获取和设置值。

Answer 2

我只是使用img标签并避开对象（不知道当前的状态，但几年前我用Flash搞砸了它......奇怪的事情经常发生）：

. loopsForCommand -path $PublicScripts -commands $commandArrayPublic
. loopsForCommand -path $PersonalScripts -commands $commandArrayPersonal

然后就像你以前一样改变来源......

（但你不能在你的SVG内部使用img）

在SVG的对象标签中选择数据属性

2 个答案: