jQuery SVG-object标记加载事件 [英] jQuery SVG-object tag load event
问题描述
我有一个页面通过jQuery动态地将SVG添加到页面：
grid.append（$（'< object>'）
.load（function（）{
// do stuff
alert（'loaded'）
}）
.attr（{
id：'tile'，
类型：'image / svg + xml'，
宽度：Math.round（tile_w），
height：Math.round（tile_h），
数据：'map / base.svg'
}）
）;
我需要访问SVG文档（将变量推送到svg脚本上下文中）但是必须为此加载SVG。我的问题是我没有让load事件工作。没有显示任何提示。
怎么办？
编辑：似乎像jQuery只是阻止将加载事件绑定到非图像或文档元素，所以我只使用官方addEventListener（）函数（愚蠢的IE不支持，但这对我来说没问题）：
grid.append（$（'< embed>'）
.attr（{
id ：'tile'+ i，
类型：'image / svg + xml'，
宽度：Math.round（tile_w），
height：Math.round（tile_h），
src：'map / base.svg'
}）
.css（{
position：'absolute'，
left：Math.round（px），
top：Math.round（py）
}）。each（function（i）{
this.addEventListener（'load'，function（e）{
alert（'loaded'）
}）
}）
）;
我不知道 grid 在您的示例中，但如果它是普通的dom元素，那么 load api调用应该是api文档中定义的格式。目前看起来你正在尝试加载一个没有任何意义的函数调用。
.load（url [，数据] [，完成（responseText，textStatus，XMLHttpRequest）]）
so
grid.append（$（'< object>'）。load（'image.svg'，
function（response，status， xhr）{
if（status =='success'）{
// yay load is ok
alert（'loaded'）;
}
}）
）;
更新：我还没有尝试使用HTML将SVG数据输入浏览器但是W3C文档没有提到可以使用< object> 标记。他们的示例使用< embed>
< embed src = circle1.svgtype =image / svg + xml/>
您是否尝试过使用它而不是< object> ？
更新2：
我不认为以上解决方案也可以使用，因为以下标记支持JS onload 事件< body>，< frame>，< frameset> ，iframe，< img>，< input type =image>，< link>，< script>，< style> - 我认为这是jQuery挂钩的内容因此它只适用于那些元素。 jQuery文档说，图像，脚本，框架，iframes 和窗口对象支持事件处理程序。 / p>
所以如果这不起作用，那么我想你只需要使用 .load（）方法调用并处理结果。也许你可以把svg embed标签放到单独的html文件中，或者有一个生成html嵌入的脚本。
http://www.w3schools.com/jsref/event_onload.asp
更新3：
此问题似乎至少有两个正确的解决方案。
-
jQuery SVG插件 http：// keith-wood .name / svg.html
-
jQuery
ajax（）调用详细这里包括有关在加载后与svg画布交互
的信息。
I have a page which dynamically adds SVGs to the page via jQuery:
grid.append($('<object>')
.load(function () {
// do stuff
alert('loaded')
})
.attr({
id: 'tile',
type: 'image/svg+xml',
width: Math.round(tile_w),
height: Math.round(tile_h),
data: 'map/base.svg'
})
);
I need access to the SVG document (to "push" a variable into the svg script context) but the SVG has to be loaded for that. My problem is that I dont get the load event working. No alert is displayed.
How to do?
Edit: It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element, so I just use the "official" addEventListener() function (not supported by stupid IE, but this is no problem for me):
grid.append($('<embed>')
.attr({
id: 'tile' + i,
type: 'image/svg+xml',
width: Math.round(tile_w),
height: Math.round(tile_h),
src: 'map/base.svg'
})
.css({
position: 'absolute',
left: Math.round(p.x),
top: Math.round(p.y)
}).each(function (i){
this.addEventListener ('load', function (e) {
alert('loaded')
})
})
);
I don't know what grid is in your example but if it is a normal dom element then the load api call should be of the format defined in the api docs. Currently it looks like you are trying to load a function call which doesn't make any sense.
.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )
so
grid.append($('<object>').load('image.svg',
function (response, status, xhr) {
if (status == 'success') {
// yay the load is ok
alert('loaded');
}
})
);
UPDATE: I haven't tried lodaing SVG data into the browser with HTML but the W3C docs don't mention that the <object> tag could be used for that. Their example uses <embed>
<embed src="circle1.svg" type="image/svg+xml" />
have you tried using that instead of <object>?
UPDATE 2:
I don't think the above solution will work either, since the JS onload event is supported by the following tags <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style> - I assume this is what jQuery is hooking into, thus it'll only work for those elements. The jQuery docs say that the event handler is supported by images, scripts, frames, iframes and the window object.
So indeed if that doesn't work, then I suppose you'll just need to use the .load() method call and handle the results. Maybe you can put the svg embed tags into separate html files, or have a script that generates the html embeds.
http://www.w3schools.com/jsref/event_onload.asp
UPDATE 3:
There would appear to be at least two correct solutions to this problem.
jQuery SVG plugin http://keith-wood.name/svg.html
a jQuery
ajax()call detailed here including information about interacting with the svg canvas after load.
这篇关于jQuery SVG-object标记加载事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
