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

IT技术 javascript html svg
2021-01-22 16:06:46

假设你的 HTML 中有这个：

<img src='example.svg' />

您将如何<rect>, <circle>, <ellipse>通过 JavaScript 访问 example.svg的内容（即，等）？

5个回答

无法从img元素中获取引用的 svg 的 DOM 。

如果您使用<object>,<embed>或者<iframe>那么您可以使用.contentDocument（首选）来获取引用的 svg，或者.getSVGDocument它可能与旧的 svg 插件更兼容。

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

任何需要使用<img/>标签的人（例如，如果您无法控制 SVG 资源）可能想知道附加SVG 片段标识符，例如“ <img src="myimage.svg#svgView(preserveAspectRatio(none))" />”，它可以让您控制纵横比viewBox等，与内联 SVG 相同定义。
2021-03-17 16:06:46
该示例的链接是否已损坏？
2021-03-29 16:06:46
document.querySelector('#id-of-object-包含-svg').contentDocument.querySelector('svg').outerHTML
2021-04-07 16:06:46
请注意，.contentDocument可以访问由<object>和<iframe>元素引用的外部 SVG 文件，但不能通过<embed>元素.getSVGDocument()访问，而可以从所有三个元素访问相同的文件。但是，.getSVGDocument() 现在已弃用，因此应仅在<embed>实际需要处理元素时使用。还要注意，这.contentDocument是一个（非函数）属性，.getSVGDocument()而是一个方法（因此需要括号）。
2021-04-09 16:06:46
@Goswin 奇怪，看起来像是网络服务器故障，文件在那里......希望它很快就会开始工作。
2021-04-11 16:06:46

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

您可以做的是使用 AJAX 请求将 SVG 加载为 XML，然后将其作为内联 SVG 插入到 DOM 中，然后您就可以浏览和操作了。此 D3 示例演示了该技术。我认为d3.xml()这里使用的函数或多或少等同于 jQuery 的$.ajax()with dataType: "xml".

2021-03-17 16:06:46
或者使用<object>,<embed>或者<iframe>标签来加载 svg，这些都允许你获取 DOM。
2021-03-24 16:06:46
真的吗？我正在玩弄它，jQuery 和element.childNodes似乎都没有显示任何暴露的 SVG DOM。你有例子吗？
2021-03-24 16:06:46
谢谢，这很酷 - 从未听说过getSVGDocument。您应该提交作为答案 - 我认为这是一种比我更简单、更直接的方法。
2021-03-26 16:06:46
nrabinowitz：同意，这里的 Erik Dahlstroms 示例是一个很好的解决方案 - 您可以通过代理获得赏金点！
2021-04-02 16:06:46

如果您使用 SVG 内联到 CSSurl(data:...)或仅使用url(*.svg)背景，您可以使用svg-embed将它们嵌入到 DOM 中。

支持 Chrome 11+、Safari 5+、FireFox 4+ 和 IE9+。

不，不可能，但您可以像此处提到的那样转换<img>为<svg>，并且您可以访问 DOM 中 svg 中的节点。

如果您使用的是可以获取文件并插入文件的后端语言，那么至少您可以清理创作体验。喜欢：

<?php echo file_get_contents("kiwi.svg"); ?>

这里有一点 PHP 特定的东西……我向我证明了 file_get_contents() 是这里正确的函数，而不是我以前使用的 include() 或 include_once() 。特别是因为 SVG 有时会以它作为开头行导出，这将导致 PHP 解析器阻塞它。

（信息取自CSS-tricks）

其它你可能感兴趣的问题
上一篇d3 将文本添加到圆圈 下一篇ES6 Promises - 类似于 async.each？