Maquetteがそれを変更した後にDOMを更新する方法

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要素とその子孫は、SVG XML名前空間を取得する必要があります。 maquetteを使用して埋め込みSVGでHTMLで始まるノードをレンダリングする場合、これについて心配する必要はありません。

しかし、<g>ノードを作成することでSVGの内部から開始します。 Maquetteは、あなたがSVGの中にいたことを知らないので、「非標準的な」HTML <g>ノードが必要であると仮定します。

模型は、次のようにあなたはあなたの問題を解決するために使用することができ、そのDOM.create方法に二番目の引数を提供理由です：

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