3

如前所述，我想使用 Maquette 作为基本的超脚本语言。因此，我不想使用maquette.projector. 然而，尽管能够将使用 Maquette 制作的 SVG 对象附加到 DOM，但 DOM 似乎并没有更新。例如，在下面的代码中，我希望能够单击一个按钮来创建一个圆圈。如果我使用 Chrome 开发工具检查 DOM，我可以将 SVG 圆对象添加到 DOM，但 DOM 尚未更新。我应该如何更新 DOM？

var h = maquette.h;
var dom = maquette.dom;
var svg;
var svgNode;
var root;
var rootDiv;

function addCircle(evt) {
  console.log("adding circle");
  const c = h('g', [
              h('circle#cool.sweet', {cx: '100', cy: '100', r: '100', fill: 'red'}),
            ]);
  const g = dom.create(c).domNode;
  svgNode.appendChild(g);
}

document.addEventListener('DOMContentLoaded', function () {
  svg = h('svg', {styles: {height: "200px", width: "200px"}})
  rootDiv = h('div.sweet', [
    svg,
  ]);
  root = dom.create(rootDiv).domNode;
  document.body.appendChild(root);
  svgNode = root.querySelector("svg");
  
  const button = h('button', {
    onclick: addCircle,
  }, ["Add circle"]);
  
  const buttonNode = dom.create(button).domNode;
  root.appendChild(buttonNode);
});
<script src="//cdnjs.cloudflare.com/ajax/libs/maquette/2.4.1/maquette.min.js"></script>

为什么appendChild不渲染任何东西？

4

1 回答 1

3

这是一个艰难的过程。圆圈没有出现在屏幕上的原因（尽管它已添加到 DOM）与 XML 命名空间有关。

SVG 元素及其后代应该获得 SVG XML 命名空间。当您使用 maquette 渲染以 HTML 开头并带有嵌入式 SVG 的节点时，您不必担心这一点。

但是现在您通过创建一个<g>节点在 SVG 内部开始。Maquette 假设您需要一个“非标准”HTML<g>节点，因为它不知道您在 SVG 中。

这就是为什么 maquette 为其DOM.create方法提供了第二个参数，您可以按如下方式使用它来解决您的问题：

const g = dom.create(c, {namespace: 'http://www.w3.org/2000/svg'}).domNode;

于 2017-02-27T13:18:08.247 回答