Как добраться до элементов SVG с помощью Angular ViewChildren

Question

У меня svg загружен как объект:

<object data="assets/img/states.svg" type="image/svg+xml" id="map"></object>

Этот svg содержит большую png карту и несколько прямоугольных и текстовых элементов.

<rect
     y="224.72084"
     x="644.87109"
     height="231.68137"
     width="101.08391"
     id="RECT_TO_GET" />

Я хотел бы получить все rect элементы в массиве, как я это делаю с обычными HTML-элементами, например:

@ViewChildren('rect') rects !: QueryList<any>;
this.rects.forEach(r=> {
            console.log(r);
        });

Проблема в том, что массив rects всегда пуст. Я пытался получить их в ngViewAfterInit() и ngAfterViewChecked() безуспешно. Как я могу добраться до элементов SVG?

Я еще не пытался получить их к getElementsById(), я бы хотел сделать это угловым путем, если это возможно.

Все дело в том, чтобы дать контекстные цвета каждому прямоугольному элементу, как только я их получу.

Answer 1

Сделал еще несколько исследований и нашел решение ниже. Самое интересное в том, что этот код находится в методе ngAfterViewInit моего углового компонента, и ему все еще нужен для работы обработчик событий window.onload. Почему?

window.addEventListener("load", function() {
    var svgObject = document.getElementById('map').contentDocument;
    var svg = svgObject.getElementById('svg48152');
    console.log(svg);
    const rects = svg.querySelectorAll('rect');
    console.log(rects);
    rects.forEach(r => {
        console.log(r);
    });
});

Ключевыми компонентами являются свойство contentDocument и список событий onload. Некоторая полезная информация для дальнейшего использования: Использование Javascript с SVG

Answer 2

ViewChild или ViewChildren не может поддерживать селекторы CSS

https://angular.io/api/core/ViewChild

Поддерживаемые селекторы включают в себя:

• любой класс с декоратором @Component или @Directive
• переменная ссылки на шаблон в виде строки (например, запрос с помощью @ ViewChild ('cmp') `)
• любой поставщик, определенный в дереве дочерних компонентов текущего компонента (например, @ViewChild (SomeService) someService: SomeService)
• любой провайдер, определенный через строковый токен (например, @ViewChild ('someToken') someTokenVal: any)
• a TemplateRef (например, запрос с шаблоном @ViewChild (TemplateRef);)

---

вы можете получить HtmlElement из ссылочной переменной шаблона и начать пытаться манипулировать им после того, как объектный ресурс загружен

онлайн пример

HTML

  <object #mySvg data="./assets/new.svg" type="image/svg+xml" id="map"></object> 

компонент

  @ViewChild('mySvg') mySvg;

  ngOnInit() {
      const objElm = (this.mySvg.nativeElement as HTMLObjectElement);
    objElm.onload = () => {
        const paths = objElm.contentDocument.querySelectorAll('path');

        paths.forEach((path,index) => {
          console.log(`path:${index} , d=${path.getAttribute("d")}`);
        })

    }    
  }