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执行某些操作，可以使用＆＃39; contentDocument＆＃39; （因为这是在另一个文档中），所以使用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
}

动态地将数据属性分配给svg对象

1 个答案: