넉 아웃의 HTML 바인딩 + SVG

Question

나는 넉 아웃을 사용하여 문자열을 SVG 데이터 바인딩에 html: 바인딩으로 전달하여 동적 SVG를 렌더링합니다. 크롬에서는 이것이 완벽하게 작동합니다. Firefox에서는 DOM을 올바르게 설정합니다 (즉, 자식 svg 요소가 방화범에 빠져 있음을 볼 수 있음)하지만 그래픽 자체는 표시되지 않습니다.

필자는 http://jsfiddle.net/4eTJL/1/을 만들었지 만 흥미롭게도 Firefox의 동작은 두 브라우저에서 피들을 보여줍니다.

Answer 1

<svg> 태그는 바인딩 ko html 작동하지 않는 이유,하지만 당신은 표준 HTML 태그에 결박 한 후, logo 변수 안에 모든 SVG 내용을 넣어이 문제를 방지 할 수 있습니다, 더 innerHTML 속성이 없습니다. 크롬은 로컬 테스트가 jsfiddle하기에서 다른 결과를 보여줍니다 이유

http://jsfiddle.net/4eTJL/2/

는

<div data-bind="html: logo"></div> 

var vm = { 
    logo: '<svg viewBox="0 0 50 50" class="center-block" xmlns="http://www.w3.org/2000/svg" width="80" height="80" data-bind="xml: logo"><rect ry="8" rx="8" id="svg_2" height="50" width="50" y="0" x="0" stroke-width="5" fill="#bfbfbf"></rect><text font-family="Graduate" textLength="40" lengthAdjust="spacingAndGlyphs" text-anchor="middle" x="25" y="37" font-size="33" fill="crimson" stroke="black" stroke-width="1.25">NO</text></svg>' 
}; 

ko.applyBindings(vm);