사용자 지정 aurelia atttribute에서 간단한 DOM 조작

Question

간단한 DOM 조작을 테스트하여 Aurelia 사용자 지정 특성을 실험하고 있습니다.

내 svg 노드에 추가 및 타원 노드를 조작하여 놀랍게도 HTML을 수정하지만 타원을 렌더링하지 않습니다.

innerHtml 속성을 조작하면 예상대로 작동합니다.

import { bindable, inject} from 'aureliaframework'; 
 

 
@inject(Element) 
 
export class TestCustomAttribute { 
 

 
    constructor(private element: SVGElement) { 
 
    } 
 
    attached() 
 
    { 
 
     var ellipse = document.createElement("ellipse"); 
 
     ellipse.setAttribute("cx","200"); 
 
     ellipse.setAttribute("cy","200"); 
 
     ellipse.setAttribute("rx","100") 
 
     ellipse.setAttribute("ry","100") 
 
     ellipse.setAttribute("style","fill:blue") 
 

 
     //this is rendered 
 
     this.element.innerHTML = "<ellipse style='fill: purple' cx='200' cy='200' rx='100' ry='100'></ellipse>" 
 
      
 
     //this shows on DOM explorer but not rendered 
 
     this.element.appendChild(ellipse) 
 
    }

그것은 appendNode() 대신 innerHTML을 조작 요소를 사용하여 원하는 결과를 달성하는 것이 가능하다?

Answer 1

이것은 Aurelia의 문제가 아니라 DOM API 및 SVG 요소를 둘러싼 이상한 모양입니다.

대신 https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

은 자세한 내용은이 질문을 참조에는 createElementNS를 사용하여 시도하고 SVG 네임 스페이스를 포함 jquery's append not working with svg element?