您访问 SVG 的方式取决于您在页面中包含它的方式。您可以使用和object
或embed
元素并链接到 SVG,或将其内嵌在页面中。请注意,通过img
元素包含它是行不通的 - SVG 将被视为图像“黑匣子”,您将无法访问内部结构。
通过对象嵌入很简单,并且适用于所有支持 SVG 的浏览器:
<object id="svg_object" width="672" height="243" data="myimage.svg" type="image/svg+xml">
No SVG support
</object>
然后要获得内部结构,您需要获得contentDocument
:
var svg = $('svg_object').contentDocument;
var svgel = svg.getElementById('myid');
请注意,在这种情况下,prototype.js 不会自动扩展 SVG 的内部 DOM,因此您必须使用常规 DOM 方法。
application/xhtml+xml
如果您将页面作为或浏览器具有兼容 HTML5 的解析器(Firefox 4、Chrome、IE9 但不是 Opera 或更早版本的 Firefox),则将 SVG 直接嵌入页面将起作用。但是,现在您的 prototype.js 方法将直接与 SVG 元素一起使用,从而使某些事情变得更加简单:
var svgel = $('myid');
我做了几个例子:object,inline。它们在 Firefox 4 中为我工作,你可能需要做一些事情才能让它们在其他浏览器中工作(就支持而言,上面提到的警告)。