SVG 未在 Opera 和 Firefox 中显示，但在 Chrome 中显示答案

【问题标题】：SVG not showing in Opera and Firefox, but ChromeSVG 未在 Opera 和 Firefox 中显示，但在 Chrome 中显示
【发布时间】：2011-07-18 09:23:27
【问题描述】：

我正在尝试显示这个简单的嵌入式 SVG 图像：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_1" y="125" x="141" stroke-width="0" stroke="#000000" fill="#000000">test</text>
 </g>
</svg>
</body>
</html>

Chrome 显示它，但 Opera 和 Firefox 没有。有什么遗漏吗？

【问题讨论】：

标签： svg cross-browser

【解决方案1】：

嗯，我找到了原因：大多数浏览器还不支持直接在 HTML 中嵌入 SVG 标签。

【讨论】：

【解决方案2】：

您需要一个 HTML5 解析器才能正确显示它，例如Firefox 4，或Opera 11.50。查看caniuse.com 了解更多浏览器详情。

您可以将 XHTML 与内联 SVG 图像一起使用，但它适用于所有支持 SVG 的浏览器。示例见here。

【讨论】：

【解决方案3】：

事实上，它是受支持的 :) 你有两个选择——旧的一个，使用 XHTML，一个新的，使用 HTML5 和一个带有 HTML5 解析器的现代浏览器：

XHTML 示例（适用于大多数浏览器，包括安装了 Adobe 插件的旧 Internet Explorer）：

<?xml version="1.0" encoding="UTF-8"?>
<!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">
  <head>
    <title>SVG embedded inline in XHTML</title>
  </head>

  <body>
    <h1>SVG embedded inline in XHTML</h1>

    <object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
    <?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>

    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
      <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg:svg>

  </body>

</html>

html5示例（IE9、FF4和Chrome、Safari近期支持atm）：

<!DOCTYPE html>
<html>
  <head>
    <title>SVG in text/html</title>
  </head>

  <body>
    <h1>SVG in text/html</h1>
    <p><svg height=86 width=90 viewBox='5 9 90 86' style='float: left;'>
      <path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d='M 10,90 L 90,90 L 50,14 Z'/>
      <line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
    </svg><b>Warning:</b> Remember that &PlusMinus; means that there are two
    solutions!</p>

  </body>
</html>

【讨论】：

如果 SVG 在文件中，而不是嵌入，在这种情况下的语法是什么？

【解决方案4】：

According to this site, you do have some options。虽然我个人也为此感到挣扎......

“一种简单易用的包含 SVG 的方法进入网页是使用XHTML 对象标签。下面是一个例子："

<?xml version="1.0"?>
<!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">
  <head>
  <title>SVG Included with <object> tag in an XHTML File</title>
  </head>
  <body>  <h1>An SVG rectangle (via <object> tag)</h1>

  <object type="image/svg+xml" data="web_square.svg">
    Browser does not support SVG files!
  </object>
</body>
</html>

"包含SVG文件。"image/svg+xml"是被包含文件的MIME类型，必须给出。"

“如果浏览器不支持 SVG，将显示的文本。浏览器应该忽略它们不理解的标签，从而暴露文本。”

他还概述了一种“使用名称空间”的方法...

“通过名称空间，可以将 SVG 文件直接放在 XHTML 文件中。这是一个非常简单的 XHTML 文件示例，它显示一个蓝色方块。这个方块是用 Inkscape 绘制的。（为了清楚起见，Inkscape 绘图被保存为纯 SVG 文件，并删除了一些未使用的矩形属性。）"

<?xml version="1.0"?>
<!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">
  <head> <title>SVG Embedded into an XHTML File</title>
  </head>
  <body> <h1>An SVG rectangle (via Name spaces)</h1>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs   id="defs1343" />
  <g      id="layer1">
    <rect
          width="90"   height="90"
          x="30"       y="30"
          style="fill:#0000ff;
          fill-opacity:0.75;
          stroke:#000000    stroke-width:1px"
          id="rect1353" />
  </g>
</svg>
</body>
</html>

祝你好运...成为 SVG 并不容易...

【讨论】：