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 を使用して、SVG が埋め込まれた HTML で始まるノードをレンダリングする場合、これについて心配する必要はありません。

<g>しかしここでは、ノードを作成して SVG の内部から始めます。<g>Maquette は、ユーザーがSVG 内にいることを認識していないため、「非標準」HTML ノードが必要であると想定します。

これが、maquette がDOM.createメソッドに 2 番目の引数を提供する理由です。これを次のように使用して問題を解決できます。

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

于 2017-02-27T13:18:08.247 に答える