在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函数调用,并希望避免其他任何绊脚石。

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

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

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

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

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

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