Question

我有一个页面，它通过jQuery动态地将SVG添加到页面中：

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'
})
);

我需要访问SVG文档（将一个变量“推”到svg脚本上下文中），但必须为此加载SVG。我的问题是我没有让load事件工作。没有显示警报。

怎么办？

编辑：似乎jQuery只是阻止将“加载”事件绑定到非图像或文档元素，所以我只使用“官方”addEventListener（）函数（不是由愚蠢的IE支持，但对我来说这没问题）：

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')
        })
    })
);

Answer 1

我不知道你的示例中有grid，但如果它是普通的dom元素，那么load api调用应该是api文档中定义的格式。目前，您似乎正在尝试加载一个没有任何意义的函数调用。

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

所以

grid.append($('<object>').load('image.svg',
    function (response, status, xhr) {
        if (status == 'success') {
            // yay the load is ok
            alert('loaded');
        }
    })
);

http://api.jquery.com/load/

更新：我没有尝试使用HTML将SVG数据保存到浏览器中，但是W3C文档没有提到可以使用<object>标记。他们的示例使用<embed>

<embed src="circle1.svg" type="image/svg+xml" />

您是否尝试过使用它代替<object>？

更新2：

我认为上述解决方案也不会起作用，因为以下标记onload支持JS <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script>, <style>事件 - 我认为这是jQuery挂钩的内容，因此它会只适用于那些元素。 jQuery文档说images, scripts, frames, iframes和window对象支持事件处理程序。

所以如果这不起作用，那么我想你只需要使用.load()方法调用并处理结果。也许你可以把svg embed标签放到单独的html文件中，或者有一个生成html嵌入的脚本。

http://www.w3schools.com/jsref/event_onload.asp

更新3：

这个问题似乎至少有两个正确的解决方案。

jQuery SVG插件http://keith-wood.name/svg.html
jQuery ajax()调用详细here，其中包含有关互动的信息加载后使用svg画布。

jQuery SVG-object标记加载事件

1 个答案: