在iOS中包含HTML5中的SVG

我想在HTML5网页中包含SVG图像，通过JavaScript与SVG进行交互，并应用CSS样式。 如果可能的话，我宁愿将SVG保存在一个单独的文件中。 我希望能够离线使用网页，所以希望任何解决schemebuild议将与此兼容。

请有人build议这样做最好的/最多的跨浏览器兼容的方式？ 如果没有一种方法可以在所有的浏览器上运行的话，我会很乐意去解决一个适用于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文件，并保持在主HTML5文件的JS – 即我一直无法获得这些方法来允许SVG文件引用JSfunction，或允许HTML文件获得访问包含的SVG文件中的元素。 即使内联SVG在iOS上还没有工作:(所以，我要用Raphael（http://raphaeljs.com）来试试我的运气，我认为这可能意味着我需要编程创buildSVG而不是只能链接到一个外部的.svg文件，我只需要编写一个脚本来将SVG内容转换成JS Raphael函数调用，并希望避免其他任何绊脚石。

Answer 1

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

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

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

但是我认为，如果您使用的是HTML5，那么您将面向现代浏览器，因此您应该使用内联svg和<svg>标签。

Answer 2

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

它显示了将外部SVG文件embedded到HTML中的五种不同方法（请注意，这些不是唯一的方法，但它们是最简单的）。 这也是检查特定浏览器function的快捷方式。