SVG.js не тянет svg в контейнер (полимер) - PullRequest
Новая
       17

SVG.js не тянет svg в контейнер (полимер)

0 голосов
/ 02 июня 2019

Я установил svg.js с помощью NPM и импортировал модуль в мой файл пользовательских элементов через import "svg.js";, 

import "svg.js";

class MyView2 extends PolymerElement {
  static get template() {
    return html`

      <div id="drawing"></div>

    `;
  }

  connectedCallback() {
    super.ready();
    var draw = SVG("drawing").size(300, 300);
    var rect = draw.rect(100, 100).attr({ fill: "#f06" });
  }
}

Этот должен вставить SVG внутри div, но вместо этого он выдает эту ошибку в консоли: 

svg.js:3060 Uncaught TypeError: Cannot read property 'nodeName' of null
    at new create (svg.js:3060)
    at globalRef.SVG (svg.js:33)
    at HTMLElement.connectedCallback (my-view2.js:42)
    at my-view2.js:50

Я довольно новичок в Polymer, поэтому не уверен, что пропускаю что-то очевидное.

1 Ответ

0 голосов
/ 07 июня 2019

У вашего компонента есть Shadow Dom, поэтому SVG не может его найти.Пожалуйста, попробуйте это: 

let node = this.shadowRoot.querySelector('drawing');
let draw = SVG.adopt(node);
let rect = draw.rect(100, 100).attr({ fill: "#f06" });
...