在适用于 iOS 的 HTML5 中包含 SVG答案

【问题标题】：Including SVG in HTML5 for iOS在适用于 iOS 的 HTML5 中包含 SVG
【发布时间】：2011-07-20 06:56:28
【问题描述】：

我想在 HTML5 网页中包含一个 SVG 图像，通过 JavaScript 与这个 SVG 交互，并应用 CSS 样式。如果可能的话，我更愿意将 SVG 保存在一个单独的文件中。我希望能够离线使用该网页，因此希望推荐的任何解决方案都能与此兼容。

请有人建议最好/最兼容跨浏览器的方法吗？如果没有真正适用于所有浏览器的方法，我很乐意选择一种适用于 iOS 4.3 的 Safari 浏览器的方法 :-)

提前致谢！

感谢大家，并为没有尽快提供更新表示歉意 - 不幸的是，我被另一个项目分心了！在使用各种替代选项一段时间后，（http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html/http://www.schepers.cc/svg/blendups/embedding.html）我仍然无法使用外部 .svg 文件并将 JS 保留在主 HTML5 文件中 - 即我无法获得这些方法允许 SVG 文件引用 JS 函数，或者允许 HTML 文件访问包含的 SVG 文件中的元素。甚至内联 SVG 也无法在 iOS 上运行 :( 因此，我将与 Raphael (http://raphaeljs.com) 一起试试运气。我认为这可能意味着我需要以编程方式创建 SVG，而不是仅仅能够链接到外部 .svg 文件。我只需要编写一个脚本来将 SVG 内容转换为 JS Raphael 函数调用，并希望避免任何其他绊脚石。

【问题讨论】：

标签： javascript ios html safari svg

【解决方案1】：

这取决于您的目标浏览器。现代浏览器（IE9、Chrome、Firefox4...）支持内联 SVG。旧版浏览器可能需要一些替代品。

这里有一个在线测试，通过使用几种方法来包含 SVG 来检查浏览器支持。

http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html

但我认为，如果您使用的是 HTML5，那么您的目标是现代浏览器，因此您应该使用带有

【讨论】：

OP 提到他更喜欢使用单独的 SVG 文件。
是的，他可以使用单独的 SVG 文件，使用内联 SVG 包含它，在
感谢亚历杭德罗和马蒂亚斯。您能否提供有关如何使用 use 标签导入文件的更多信息？规范（1.1）似乎表明这不能用于导入完整文件？
你是对的，我认为'use'标签应该允许这样做，但似乎浏览器实现有一些限制。我发现了另一个关于此的问题 - stackoverflow.com/questions/3346106/…

【解决方案2】：

看看这个页面：http://www.schepers.cc/svg/blendups/embedding.html

它展示了将外部 SVG 文件嵌入 HTML 的五种不同方法（请注意，这些方法并不是唯一的方法，但它们是最简单的）。这也是检查特定浏览器功能的快速方法。

【讨论】：

感谢您的链接；我已经在 Safari (iOS) 中加载了此页面，并且可以查看哪些有效，哪些无效。我将不得不花一些时间与 JS 一起玩，看看哪些方法适合。