如何在 Firefox 中将 SVG 图像与 PNG 互换使用？答案

【问题标题】：How do I use SVG images interchangably with PNGs in Firefox?如何在 Firefox 中将 SVG 图像与 PNG 互换使用？
【发布时间】：2010-06-23 09:49:29
【问题描述】：

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

Firefox 有一个当前的bug，可以防止在<img> 标签中使用SVG 文件。我从我的其他 xhtml 工作中了解到，<object> 标签是外部媒体的 (xhtml) 前进方式（并且基本上等效 - 除了增强的回退功能支持之外），并且由于 Firefox 在对象标签中支持 SVG，我切换了使用这些。

然而，似乎 SVG 的“特性”阻止了它们作为可缩放图像互换使用，因为 JavaScript 事件似乎并没有从对象中冒出来等等。

有谁知道这些问题是否可以解决？ IE。如何使用 object 标签告诉 Firefox 我只想要图片？

【问题讨论】：

标签： javascript html firefox svg

【解决方案1】：

object 元素“封装”了包含的对象，也就是说，两个 DOM 是完全分开的。因此，事件不能从 SVG DOM 传递到包含 HTML DOM。

但是，使用 JavaScript 和 AJAX，您可以只加载 SVG 文件（因为它是 XML）并将其直接放入 DOM（您可能需要在某处设置一些宽度/高度）：

使用 jQuery，代码如下：

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

【讨论】：

如果你想要一个img，那么你可能根本不希望它是交互式的。您可以通过在插入根 svg 时向根 svg 添加属性 pointer-events="none" 来获得它（但请注意，它可以被为“指针事件”指定不同值的子元素覆盖）。

【解决方案2】：

我不确定这是否属于作弊，但我已将对象标记设置为“z-index: -1”，并将包含的 div 设置为“位置：相对”（以创建新的定位上下文而不更改页面布局）。

为此，我添加了另一个绝对定位的 div，高度和宽度设置为 100%；这实际上位于对象标签上方（并且由于定位上下文而不会在容器后面），最终结果是鼠标事件被覆盖 div 捕获并冒泡到容器节点。

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

【讨论】：

【解决方案3】：

也许您可以使用正确大小的DIV 并在其上设置background-image。

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

【讨论】：