0

I'm trying to let the user manipulate an avatar, with svg.js in Ionic 3, by replacing parts of the avatar (i.e. g tags representing the face, arms, etc.).

I load the avatar svg as an object, select the svg tag and 'adopt' it with svg.js as in the code below, but I can't access any of the children.

<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

Thanks in advance for any help!

sjk
  • 1
  • 1
  • You get back an array you say? And this array contains one element you say? Any chance, that this is the object you are searching for? Because svg.js wraps all elements in its own objects to add the methods. Check the node property to be sure – Fuzzyma Apr 05 '18 at 19:14
  • @Fuzzyma The element in the array is the defs element created by svg.js, but the rest of the children that I expect aren't there. – sjk Apr 09 '18 at 08:22
  • Take a look at the Dom inspector and verify that the querySelector selects the correct element and this element has indeed children - or create a codepen - that's actually the better solution – Fuzzyma Apr 09 '18 at 08:32
  • Yes, it's selecting the correct element. I'm not sure how to create a codepen with an object reference because the file is on my computer. – sjk Apr 09 '18 at 10:11
  • When using an online svg resource like so: I get a cors problem. If you have any suggestions on how to use codepen effectively please let me know – sjk Apr 09 '18 at 10:31
  • Copy and paste the svg into the html area? – Fuzzyma Apr 09 '18 at 11:41
  • I think the problem arises when loading the svg with . Instead, I loaded my svgs with ajax (and later httpclient for angular) and had no problems transferring nodes between svg elements – sjk Apr 18 '18 at 22:21
  • That could be. It could be that svgs in object tags are somehow handled as shadow down and therefore not accessible. Why are you using object tags after all? – Fuzzyma Apr 20 '18 at 05:23

1 Answers1

0

You cannot access an svg which is loaded via object tag. The browser is loading the object and displaying it. Any implementation details are hidden.

Its the same as using an svg image with <img>.

When you need to alter the svg image, insert it into the dom. You can do that by requesting the file via ajax and insert it into the dom or directly include the svg code when the page is generated

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60
  • You can access the svg contents inside an object! You need to call the contentDocument property. Then call one of the children of that document in order to get the actual contents. You might need to convert that child using innerHtml or something, but the svg data is there and accessible. – tlarson May 14 '20 at 15:22
  • True that might work. However, you can only access svgs from the same origin and they are readOnly, too. – Fuzzyma May 15 '20 at 03:21