为svg对象动态分配数据属性

Question

我有一个页面，在那里我打开了一个模态，我希望每次打开它时都会在那里显示一个新的svg图像。

<div class="col s3 center-align" id="event_logo">
    <object type="image/svg+xml" data="" id="literary_logo_object" class="event_logo_object" ></object>
</div>

我想动态地分配<object>的data属性。

我试过的是

document.getElementById('literary_logo_object').setAttribute('data','svg/literary.svg');
var event_logo = Snap(Snap("#literary_logo_object").node);

似乎不允许这样更改属性data。添加最后一行后，我得到以下错误

Error: Invalid value for <svg> attribute height="undefined"
Error: Invalid value for <svg> attribute width="undefined"

这两个错误都在snap.svg.js的930行，这是极不可能的。

我还试过什么

我很容易定义像这个这样的对象标签

<div class="col s3 center-align" id="event_logo">
    <object type="image/svg+xml" data="svg/literary.svg" id="literary_logo_object" class="event_logo_object" ></object>
</div>

并使其隐藏，即display : none

然后我试着像一样取消隐藏这个对象

$("#literary_logo_object").show();
var event_logo = Snap("#literary_logo_object").node;

在第二行之后，我又犯了同样的错误。

Answer 1

还不太清楚你在尝试什么，即我不确定你为什么要使用Snap。

document.getElementById('literary_logo_object').setAttribute('data','svg/literary.svg');

上面应该加载新的svg，就这样。

你不需要Snap，因为你没有用svg做任何事情。

我也不知道你为什么不使用Snap.load（）函数，或者你需要一个对象标记有什么特定的原因吗？

如果你想对加载的SVG做点什么，你可以用"contentDocument"引用它（因为它在另一个文档中），所以使用Snap它看起来像这样。。。

var obj = document.getElementById('literary_logo_object');
obj.setAttribute('data','svg/literary.svg');
obj.onload = function( ev ) {    // it may take a while to load
  Snap( obj.contentDocument.getElementById("someElInsideSvg") )
       .animate({ transform: 't-400,-400' }, 2000); //do whatever
}