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

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

Firefox有一个阻止SVG文件在

标记中使用的最新版本。我从其他xhtml工作中了解到，

标记是外部媒体的（xhtml）发展方向（本质上是等效的——除了增强的后退功能支持），并且由于Firefox在对象标记中支持SVG，我转而使用这些标记

然而，SVG的“特性”似乎阻止它们作为可伸缩图像互换使用，因为JavaScript事件似乎不会从对象中冒泡出来

---

有人知道这些问题是否可以解决吗？也就是说，我怎样才能告诉Firefox我只想要使用object标签的图片呢？

也许你可以使用一个大小正确的

DIV

，然后在上面设置

背景图像

编辑：这似乎不起作用，尽管我不知道为什么。
object元素“封装”了包含的对象，即两个dom完全分离。因此，事件不能从SVG DOM传递到包含HTML DOM

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

使用jQuery，代码如下所示：

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

我不确定这是否符合作弊条件，但我已将object标记设置为“z-index:-1”，将包含的div设置为“position:relative”（以创建新的定位上下文而不改变页面布局）

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

奖金div可以由jQuery添加，但为了简单起见，我只是在页面编写时将其插入服务器端。
如果您想要一个img，那么您可能根本不希望它是交互式的。您可以通过在插入根svg时向其添加属性
pointer events=“none”
来实现这一点（但请注意，可以由为“pointer events”指定不同值的子元素覆盖）。