Question

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

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

然而，似乎SVG的“功能”阻止它们作为可伸缩图像交替使用，因为JavaScript事件似乎不会从对象中冒出来，还有其他一些东西。

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

Answer 1

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

修改：这似乎不起作用，虽然我不确定原因。

Answer 2

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

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

使用jQuery，代码就是这样的：

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

Answer 3

我不确定这是否有资格作弊，但我将对象标记设置为'z-index：-1'并将包含div设置为'position：relative'（以创建新的定位上下文而不更改页面布局）。

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

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