Maquette가 DOM을 수정 한 후 DOM을 업데이트하는 방법

Question

As mentioned previously, 기본 하이퍼 스크립트 언어로 Maquette를 사용하고 싶습니다. 결과적으로 나는 maquette.projector을 사용하고 싶지 않습니다. 그러나 Maquette로 만든 SVG 객체를 DOM에 추가 할 수 있음에도 불구하고 DOM은 업데이트되지 않는 것처럼 보입니다. 예를 들어, 아래 코드에서 버튼을 클릭하여 원을 만들 수 있기를 기대합니다. Chrome Dev 도구를 사용하여 DOM을 검사하면 SVG circle 객체가 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> 노드가 필요하다고 가정합니다.

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

: 축소 모형이 당신의 문제를 해결하기 위해 다음과 같이 사용할 수는 DOM.create 방법에 두 번째 인수를 제공하는 이유

이입니다