如何在Firefox中与PNG交换使用SVG图像？

Question

我的项目支持用户上传自己的图标以用于系统中的各种实体。我想支持SVG，因为这意味着相同的图像可以很好地缩放，因此可以在多个地方使用。

Firefox有一个当前bug，可防止在<img>标记中使用SVG文件。从我的其他xhtml工作中，我了解到<object>标签是外部媒体的（xhtml）方式（除了基本相同的增强后退功能支持），并且由于Firefox在对象标签中支持SVG，我转而使用这些。

但是，看起来SVG的“特性”阻止它们作为可伸缩图像互换使用，因为JavaScript事件似乎没有从对象中冒出来，还有一些其他事情。

有谁知道这些问题是否可以解决？即我怎么能告诉Firefox我只想使用对象标签的图片？

Answer 1

我不知道这是否有资格作为作弊，但我已经设置对象标签“的z-index：-1”和含股利的立场：相对“（在不改变页面布局的情况下创建新的定位上下文）。

为此，我添加了另一个绝对定位的div，其高度和宽度均设置为100％;这有效地位于对象标签的上方（并且由于定位上下文而没有进入容器后面），最终结果是鼠标事件被覆盖div捕获并冒泡到容器节点。

可以通过jQuery添加额外的div，但为了简单起见，我只是在页面组合时将其固定在服务器端。

Answer 2

也许你可以使用正确大小的DIV，并设置background-image就可以了。

编辑：这似乎不起作用，虽然我不知道为什么。

Answer 3

对象元素“封装”包含对象，即两个DOM完全分离。因此，事件无法从SVG DOM传递到containsig HTML DOM。

但是，使用JavaScript和AJAX，你可以加载SVG文件（因为它是XML），并把它直接到DOM（你可能需要的地方设置一些宽/高）：

使用jQuery，代码是沿着这样的：

$.get('icon.svg', function (svg) { 
    $('#put_svg_here').append(svg.rootElement); 
}, 'xml');