采用 SVG.js 的元素时无法访问子级答案

【问题标题】：Can't access children when adopting an element with SVG.js采用 SVG.js 的元素时无法访问子级
【发布时间】：2018-04-05 10:44:30
【问题描述】：

我试图让用户在 Ionic 3 中使用 svg.js 通过替换部分头像（即代表面部、手臂等的标签）来操作头像。

我将头像 svg 作为对象加载，选择 svg 标记并使用 svg.js 将其“采用”，如下面的代码所示，但我无法访问任何子项。

<object id="defaultGirl" type="image/svg+xml" data="assets/avatar/default-girl.svg" class=""></object>

let a: any = document.getElementById("defaultAvatarObj")
let b: any = a.contentDocument
let c: any = b.querySelector('svg')
let d: any = SVG.adopt(c)
let e: any = d.children()
console.log(e) // displays *[initializer]* -- an array with an 'initializer' object, rather than the children

提前感谢您的帮助！

【问题讨论】：

你得到一个你说的数组？这个数组包含你说的一个元素？任何机会，这是您正在寻找的对象？因为 svg.js 将所有元素包装在自己的对象中以添加方法。检查节点属性以确保
@Fuzzyma 数组中的元素是 svg.js 创建的 defs 元素，但我期望的其余子元素都不存在。
看看 Dom 检查器并验证 querySelector 选择了正确的元素并且该元素确实有子元素 - 或者创建一个 codepen - 这实际上是更好的解决方案
是的，它选择了正确的元素。我不确定如何使用对象引用创建 codepen，因为该文件在我的计算机上。
当使用在线 svg 资源时：我遇到了一个cors问题。如果您对如何有效使用 codepen 有任何建议，请告诉我

标签： ionic-framework ionic3 svg.js

【解决方案1】：

您无法访问通过对象标签加载的 svg。浏览器正在加载对象并显示它。任何实现细节都被隐藏了。

这与使用带有<img> 的svg 图像相同。

当您需要更改 svg 图片时，将其插入到 dom 中。您可以通过 ajax 请求文件并将其插入 dom 或在生成页面时直接包含 svg 代码来做到这一点

【讨论】：

您可以访问对象内部的 svg 内容！您需要调用 contentDocument 属性。然后调用该文档的其中一个子文档以获取实际的
确实可行。但是，您只能访问来自同一来源的 svg，它们也是只读的。