Question

As mentioned previously，我想用Maquette作为基本的超文本语言。因此，我不想使用maquette.projector。但是，尽管能够将使用Maquette制作的SVG对象附加到DOM，但DOM似乎没有更新。例如，在下面的代码中，我希望能够单击按钮来创建一个圆圈。如果我使用Chrome Dev工具检查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没有呈现任何内容？

Answer 1

这是一个艰难的。圈子没有出现在屏幕上的原因（虽然它被添加到DOM中）与XML命名空间有关。

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

但是现在你通过创建一个<g>节点开始进入SVG。 Maquette认为你需要一个非标准的＆＃39; HTML <g>节点，因为它不知道你在SVG里面。

这就是maquette为其DOM.create方法提供第二个参数的原因，您可以使用以下方法来解决问题：

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

Maquette修改后如何更新DOM

1 个答案: