在 Opera 中使用 SVG 的正确方法是什么？答案

【问题标题】：What's the correct way to use SVG in Opera?在 Opera 中使用 SVG 的正确方法是什么？
【发布时间】：2011-12-11 10:10:14
【问题描述】：

谁能告诉我如何强制 Opera 歌剧在 html 中渲染 SVG？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="142" height="142">
    <rect x="19" y="19" width="104" height="104" r="0" rx="0" ry="0" fill="none" stroke="#000000"
          style="stroke-opacity: 1; stroke-width: 2;" stroke-opacity="1" stroke-width="2"/>
    <rect x="36" y="36" width="70" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000000"
          style="stroke-opacity: 1; stroke-width: 2;" stroke-opacity="1" stroke-width="2"/>
</svg>

如果文件扩展名不是 .html，则此代码可以正常工作

更新：我正在尝试将带有 svg 的 div 放入由 raphael.js 在新窗口中生成的内部。它在 Opera 中不起作用。

【问题讨论】：

当你用.html扩展运行它时，它是一个有效的.html文档，html，head，body，等等...？
好吧，如果你将它嵌入为img 和src=[path/imagename].svg，它似乎没有任何问题。
是的，使用 svg 文件确实可以工作，但图像是在 javascript 中生成的。
Sooo... 为什么你的问题只提到标记？您要生成的代码在哪里？
如果我们没有看到您遇到问题的代码，我们怎么能提供帮助？

标签： html svg opera

【解决方案1】：

要让 SVG 在 HTML 中工作，浏览器必须有一个 HTML5 解析器，而 Opera 从版本 12 起才有一个。

如果您绝对必须在 HTML 代码中正确使用 SVG，则您的文档需要具有 xhtml 文件扩展名并且是有效的 xml 文件（如果您从光盘运行它），并且它还必须与application/xhtml+xml mime 类型或其他有效的 xml mime 类型（从 Web 服务器发送时）。

【讨论】：

或者只是使用 javascript 创建和插入元素，这就是 Raphaël 正在做的事情。另请参阅svgboilerplate.com，它在 html 中使用内联 svg，它包含一个脚本，可为没有 HTML5 解析器的浏览器修复 svg 内联内容。

【解决方案2】：

在 HTML 中使用 SVG in XHTML 代替 SVG。

（确保您的 Web 服务器正在发送正确的 XHTML mime 类型。）

【讨论】：

我认为 OP 可能说错了（可能），因为声称使用了 XHTML（我自己的测试只是 HTML）。但是，很难获得这种信息。
所以......这里没有办法只是将标记放在 div 中，它可以在 Opera 中工作吗？
当然，如果发送了正确的 mime 类型，它就不能在 IE 上工作。
@Marcin 这不是真的。我的网络服务器为上述文件正确发送Content-Type: application/xhtml+xml，它在 IE 中运行良好。
@globerz 当然。将内容放在一个 div 中，并使用 XHTML 内容类型和标记。在 XHTML 中可以找到 <div>。

【解决方案3】：

顺便说一句，我们最近发布了 Opera 12 Alpha，它具有 HTML5 解析器，并支持内联 SVG。它应该在那里工作，以及后续的更高版本。

【讨论】：