SVG.js不将svg拉进容器(聚合物)

Question

我使用NPM安装了svg.js，并通过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" });
  }
}

这应该会在div中插入一个SVG，但是它会在控制台中抛出这个错误：

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

我对聚合物相当陌生，所以不确定我是不是遗漏了一些显而易见的东西。

Answer 1

您的组件有一个影子Dom，所以SVG找不到它。请试试这个：

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