为什么这个简单的 SVG 在 iPhone 上不起作用？答案

【问题标题】：Why is this simple SVG not working on the iPhone?为什么这个简单的 SVG 在 iPhone 上不起作用？
【发布时间】：2012-09-12 09:14:24
【问题描述】：

我无法在运行 iOS 4.2.1 的 iPhone 上呈现简单的 SVG 矩形。代码直接取自 w3schools 教程here 或者你可以在我的服务器here 上试试。我了解 iOS 从 2.1 版开始支持 SVG，所以这应该可以！我错过了什么？

不用说，完全相同的文档可以在我的桌面浏览器和 iPad 上正确呈现。

【问题讨论】：

您可能想看看这个答案：stackoverflow.com/questions/4504942/mobile-safari-svg-problem。你也在乞求一个 W3Fools 链接，但我不会这样做；）
我不明白那个答案。据我所知，他们要求将文档的扩展名从 .html 更改为 .xml ，它会起作用吗？我正在编写一个 html5 应用程序，因此无法更改文档类型或文档扩展名。
据我了解，您必须将 xmlns 属性添加到 svg 标签 ("xmlns="http://www.w3.org/2000/svg")
我已经有了，所以这不是问题。

标签： iphone ios svg

【解决方案1】：

恐怕您需要在旧版本的 Safari 和 Firefox 中将内容类型设置为 xml 以提供内联 SVG（但是，您可以在 img 标签中使用它，因为您不需要访问它DOM）。如果您不想更改 doctype 或扩展名，您可以让 Web 服务器处理它。在 Apache 中，您可以在文档根目录中放置一个 .htaccess 文件并放入...

AddType application/xhtml+xml .html

我不确定这是否会在其他地方引起任何副作用。您只能通过一些重写条件将其提供给旧版本的 Safari，但我对语法不太熟悉，无法给您一个直接的答案。

您可以在此处看到您的文件以 xhtml 形式提供：

http://duopixel.com/stack/svg.html

【讨论】：

非常有趣！我可以通过按照您的建议添加 .htaccess 文件来使此示例正常工作，但是对于更复杂的示例，浏览器开始抱怨 xhtml 解析错误（包括 iPhone）。当然文件不是 xhtml，它是 html5 - 所以这是可以理解的。