问题描述
我想在HTML5网页中包含SVG图像，通过JavaScript与此SVG交互，并应用CSS样式。如果可能的话，我宁愿将SVG保存在单独的文件中。我希望能够离线使用网页，所以希望无论推荐哪种解决方案都与此兼容。
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.
请有人建议最好/最多交叉浏览器兼容这样做的方式？如果没有真正适用于所有浏览器的方法，我很乐意尝试使用适用于iOS 4.3 Safari浏览器的方法： - ）
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 :-)
在此先感谢！
感谢所有人并且抱歉没有尽快给出更新 - 不幸的是，我被另一个项目分心了！
经过一段时间玩各种替代选项后，（ / ）我仍然无法使用外部.svg文件并将JS保留在主HTML5文件中 - 即我无法获得这些方法允许SVG文件引用JS函数，或允许HTML文件访问包含的SVG文件中的元素。即使内联SVG还没有在iOS上运行:(
所以，我将试试拉斐尔（http://raphaeljs.com）的运气。我想这可能意味着我需要创建SVG以编程方式而不是只能链接到外部.svg文件。我只需要编写一个脚本来将SVG内容翻译成JS Raphael函数调用，并希望避免任何其他其他绊脚石。
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.
推荐答案
看看这个页面：
它显示了五种不同的嵌入方式将外部SVG文件转换为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.
这篇关于在iOS5的HTML5中包含SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！