jQuery SVG对象标记加载事件

我有一个页面，它通过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。我的问题是我无法使加载事件正常工作。不显示警报。

怎么办？

编辑：似乎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')
        })
    })
);

我不知道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:

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

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

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

更新3:

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

jQuery SVG插件http://keith-wood.name/svg.html
此处详细介绍的jQuery ajax()调用，包括有关交互的信息加载后使用svg画布。

相关内容

最新更新

热门标签：