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

我是Polymer的新手，所以不确定我是否缺少明显的东西。

Answer 1

您的组件有一个Shadow Dom，因此SVG找不到它。请尝试以下方法：

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

SVG.js没有将svg绘制到容器中（聚合物）

1 个答案: