内联 svg 不显示图像答案

【问题标题】：Inline svg does not display images内联 svg 不显示图像
【发布时间】：2012-07-09 22:54:32
【问题描述】：

我正在制作 svg 图形艺术。当它在一个单独的文件中时，图像（使用图像标签）可以很好地显示，但是当我将代码复制到 HTML 页面中时，到 svg 内部标签时，图像会消失（仅在 chrome 上）。

我怀疑这与 XML 命名空间和其他东西有关。 (xlink?)

帮助任何人？

【问题讨论】：

【解决方案1】：

这可能是 Firefox 16 和其他版本的 SVG 解析或渲染引擎中的错误。我们有 SVG 绘图，它使用 PNG 文件的图像标签，并在自己作为文档查看时按预期显示 PNG。但是，如果在 HTML 页面中我们使用 img 标签来显示那些完全相同的 SVG 绘图，那么这些 SVG 中的所有其他内容都可以正常显示，除了 SVG 的图像标签的 PNG。我应该向 Mozilla Firefox 提交错误报告，但我还没有。

【讨论】：

【解决方案2】：

检查您的 HTML 页面是否为 xhtml 页面：它应该是有效的 XML 页面并具有正确的命名空间声明：

<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

  <body><svg:svg version="1.1" (...)

【讨论】：

我用 html5 的短文档类型试过了，但它不起作用。