9

我有一个通过 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')
        })
    })
);
4

1 回答 1

-1

我不知道grid你的例子是什么，但如果它是一个普通的 dom 元素，那么loadapi 调用应该是 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 嵌入标签放入单独的 html 文件中，或者拥有一个生成 html 嵌入的脚本。

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

更新 3：

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

  1. jQuery SVG 插件http://keith-wood.name/svg.html

  2. 此处详细介绍的 jQueryajax()调用，包括有关加载后与 svg 画布交互的信息。

于 2012-08-26T19:33:49.070 回答