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

【问题标题】：Dynamically assigning data attribute to svg object将数据属性动态分配给 svg 对象
【发布时间】：2016-03-09 05:50:15
【问题描述】：

我有一个页面，我在其中打开一个模式，我希望每次打开它时都会在那里显示一个新的 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;

在第二行之后我又遇到了同样的错误。

【问题讨论】：

我不知道“snap”，但似乎对象上的属性 height/width 正在被“snap”访问，并且因为它们都没有发生未定义的错误。如果将它们添加到对象元素中会怎样？
好的，它们出现在你的 svg 中了吗？
@LGSon 是的，他们在场。
好的，那我不能做更多，因为我不知道“snap”
我刚刚用 demo here 检查了控制台，但我看到了不同的 error 和 error 我可以说它期待你通过 tagName而不是id

标签： javascript jquery svg snap.svg

【解决方案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
}

【讨论】：