如何在<img>元素中访问SVG文件的内容？

Question

假设你的HTML中有这个:

<img src='example.svg' />

您如何<rect>, <circle>, <ellipse>通过JavaScript访问example.svg 的内容(即等等)？

Answer 1

从img元素中获取引用的svg的DOM是不可能的.

如果您使用<object>,<embed>或者<iframe>然后您可以使用.contentDocument(首选)获取引用的svg,或者.getSVGDocument可能与旧的svg插件更兼容.

这是一个示例,展示了如何获取引用的svg的DOM.

注意`.contentDocument`可以访问由`<object>`和`<iframe>`元素引用的外部SVG文件,但不能访问`<embed>`元素,而`.getSVGDocument()`可以访问所有元素三.但是,`.getSVGDocument()`[现已弃用](https://www.w3.org/TR/SVG/struct.html#InterfaceGetSVGDocument)因此只应在处理`<embed>`元素时才使用需要.还要注意`.contentDocument`是一个(非函数)属性,而`.getSVGDocument()`是一个方法(因此需要括号). (2认同)

Answer 2

我很确定这是不可能的.外部SVG不像内联SVG那样是DOM的一部分,我不相信你可以从加载文档访问SVG DOM树.

您可以做的是使用AJAX请求将SVG作为XML加载,然后将其作为内联SVG插入DOM,然后您可以进行操作和操作.这个D3示例演示了该技术.我想d3.xml()在这里使用的功能或多或少相当于jQuery的$.ajax()使用dataType: "xml".