在适用于 iOS 的 HTML5 中包含 SVG
我想在 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 函数调用，并希望避免任何其他障碍。
I'd like to include an SVG image in an HTML5 web page, to interact with this SVG via JavaScript, and to apply CSS styling. If possible, I'd prefer to keep the SVG in a separate file. I'm hoping to be able to use the web page offline so hopefully whatever solution is recommended will be compatible with this.
Please could someone suggest the best / most cross-browser compatible way of doing this? If there's not really a method that will work across all browsers, I'd be happy to settle for a way that works with iOS 4.3's Safari browser :-)
Thanks in advance!
Thanks to everyone and apologies for not giving an update sooner - Unfortunately, I got distracted by another project!
After some time playing with various alternative options, ( http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html / http://www.schepers.cc/svg/blendups/embedding.html ) I've still not been able to use an external .svg file and keep the JS in the main HTML5 file - i.e. I've been unable to get these approaches to allow the SVG file to reference JS functions, or to allow the HTML file to gain access to elements from the included SVG file. Even inline SVG doesn't yet work on iOS :(
So, I'm going to try my luck with Raphael (http://raphaeljs.com). I think this may mean that I'll need to create the SVG programatically rather than being able to just link to an external .svg file. I'll just have to write a script to translate the SVG content to JS Raphael function calls and hope to avoid any other other stumbling blocks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这取决于您的目标浏览器。现代浏览器（IE9、Chrome、Firefox4...）支持内联 SVG。较旧的浏览器可能需要一些替代方案。
这里有一个在线测试，通过使用多种方法来包含 SVG 来检查浏览器支持。
http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html
但我认为，如果您使用的是 HTML5，那么您的目标是现代浏览器，因此您应该将内联 svg 与
It depends the browsers you are targeting. Modern browsers (IE9, Chrome, Firefox4...) support inline SVG. Older browsers may require some alternatives.
Here there is an online test to check browser support by using several methods to include the SVG.
http://tavmjong.free.fr/SVG/SVG_IN_HTML/svg_in_html.html
But I think that if you are using HTML5, then you are targeting modern browsers so you should use inline svg with the <svg> tag.
看看这个页面：http://www.schepers.cc/svg/blendups/ embedding.html
它显示了将外部 SVG 文件嵌入到 HTML 中的五种不同方法（请注意，这些不是唯一方法，但它们是最简单的）。这也是检查特定浏览器功能的快速方法。
Take a look at this page: http://www.schepers.cc/svg/blendups/embedding.html
It shows five different ways of embedding an external SVG file into HTML (note that these aren't the only ways, but they are the simplest). It's also a quick way to check the capabilities of a particular browser.