javascript - 动态分配数据属性给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>

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

我尝试的是

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
}