动态分配数据属性svg对象

我有一个页面，我打开一个模式，我希望每次打开一个新的SVG图像显示在那里。动态分配数据属性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;

再次在第二行后我得到相同的错误。

来源

2015-12-04 stark_1

我不知道“管理单元”，但似乎对象的属性高度/宽度通过“管理单元”进行访问，并且没有发生未定义的错误。如果你将这些添加到你的对象元素呢？ – LGSon

@LGSon试过。 –

好的，他们是否出现在你的svg？ – LGSon

它不太清楚你正在尝试什么，即我不知道你为什么使用Snap（还没有）。

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

上面应该加载新的svg到位，这就是它。

你不需要捕捉这个，因为你没有对svg做任何事情。

我也不确定为什么你不只是使用Snap.load（）函数，或者是否有一些特定的原因需要一个对象标签？

如果你想那么做加载SVG多数民众赞成的东西，你可以用“contentDocument”引用它（因为这是在不同的文件），因此，使用捕捉它看起来像这样...

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 
}

来源

2015-12-04 13:40:00 Ian

动态分配数据属性svg对象

回答

相关问题