0

There seems to be several ways of almost doing this. If I load the svg image with svg.js apparently I can access its elements by id. According to the docs I can get the same result using SVG.adopt but that requires an object reference. Using document.getElementById(), I can get the parent svg object but not an element within it. I'm trying this sort of thing but it's printing null each time. 

ionViewDidLoad() {
 let draw = document.getElementById("svg");
 draw.addEventListener("load",function() {
  let element = SVG.adopt(document.getElementById('element_0'));//I also tried SVG.get

  console.log(element, document.getElementById('element_0'));
 }, false);
}

I tried using console.log(draw.getElementsByClassName("segment")), having set the class name on an element to segment. I just got back an empty array.

Edit: This will work with inline SVG and the SVG.get('elementId'). I had been using:

<object id="svg" data="img.svg" type="image/svg+xml" width="100%"></object>

The question remains how do I load an svg from a file and subsequently manipulate it with svg.js?

stephen
  • 385
  • 3
  • 24
  • You cannot access svg content you loaded from a file. See this answer: https://stackoverflow.com/questions/47435561/svg-js-remove-read-attribute-transform-from-elements-imported-with-use – Fuzzyma Feb 15 '18 at 11:51
  • If that's the case how come snap.svg can load and access components of external svg files? – stephen Feb 15 '18 at 16:12
  • They most likely pull the file content via Ajax and insert the content of the file in the Dom. You just reference the file via svg which is not the same as having the content of the file in your Dom physically. – Fuzzyma Feb 15 '18 at 16:35
  • Possible duplicate of [SVG.js, remove/read attribute "transform" from elements imported with "use"](https://stackoverflow.com/questions/47435561/svg-js-remove-read-attribute-transform-from-elements-imported-with-use) – Fuzzyma Jun 13 '18 at 16:52

0 Answers0