假设你的HTML中有这个：
<img src='example.svg' />
您如何通过JavaScript访问example.svg的内容（即<rect>, <circle>, <ellipse>等...）？
答案 0 :(得分：33)
无法从img元素获取引用的svg的DOM。
如果您使用<object>，<embed>或<iframe>，那么您可以使用.contentDocument（首选）来获取引用的svg或.getSVGDocument与旧的svg插件更兼容。
这里有一个example，展示了如何获取引用的svg的DOM。
答案 1 :(得分：14)
我很确定这是不可能的。外部SVG不像内联SVG那样是DOM的一部分，我不相信你可以从加载文档中访问SVG DOM树。
可以做的是使用AJAX请求将SVG作为XML加载，然后将其作为内联SVG插入到DOM中，然后可以进行操作和操作。 This D3 example演示了这项技术。我认为这里使用的d3.xml()函数或多或少等同于jQuery的$.ajax()和dataType: "xml"。
答案 2 :(得分：0)
如果您使用SVG内嵌到CSS url(data:...)或仅使用url(*.svg)背景，您可以使用svg-embed将它们嵌入到DOM中。
支持Chrome 11 +，Safari 5 +，FireFox 4+和IE9 +。
答案 3 :(得分：0)
不，不可能，但您可以按照HERE将<img>转换为<svg>，您只需访问DOM中svg中的节点即可。
答案 4 :(得分：0)
如果您使用的是可以获取文件并插入文件的后端语言，那么至少您可以清理创作体验。喜欢：
<?php echo file_get_contents("kiwi.svg"); ?>
这里有一点 PHP 特定的东西……我向我证明了 file_get_contents() 是这里正确的函数，而不是我以前使用的 include() 或 include_once() 。特别是因为 SVG 有时会以它作为开始行导出，这会导致 PHP 解析器阻塞它。
（从CSS-tricks中提取的信息）