Javascript 结合KnockoutJS使用SVGWeb-动态添加SVG

我试图用knockoutJS动态呈现一些SVG。换句话说，ajax响应将返回有效的SVG，我希望svgweb动态显示它

---

注意-这个问题是用“回答您自己的问题”功能编写和回答的，因此我希望能为下一个家伙节省一个小时左右的搜索时间。

如中所述，您需要使用svgweb公开的方法。请注意，它接受一个实际的节点，而不仅仅是文本

为了使事情变得简单，您可以去掉ajax响应中出现的任何

或

节点。然后，在用jQuery包装剥离的文本之后，结果的第0个节点应该是一个有效的svg节点，可以传递给

appendChild

下面的knockout扩展对该功能进行了封装

ko.bindingHandlers.renderSvg = {
    init: renderSvg,
    update: renderSvg
};

function renderSvg(element, valueAccessor, allBindingsAccessor, viewModel) {
    var rawVal = valueAccessor();
    var svgText = ko.utils.unwrapObservable(rawVal);

    if (!svgText) {
        element.innerHTML = '';
    } else {
        //clear out previous content
        element.innerHTML = '';

        //strip out any `<xml>` or <!doctype> tags that come over
        if (svgText.indexOf('<svg') > 0){
            svgText = svgText.substr(svgText.indexOf('<svg'));
        }
        window.svgweb.appendChild($(svgText)[0], element);
    }
};

ko.bindingHandlers.renderSvg={
初始化：renderSvg，
更新：renderSvg
};
函数renderSvg（元素、valueAccessor、allBindingsAccessor、viewModel）{
var rawVal=valueAccessor（）；
var svgText=ko.utils.unwrapobbservable（rawVal）；
如果（！svgText）{
element.innerHTML=''；
}否则{
//清除以前的内容
element.innerHTML=''；
//去掉掉掉掉的任何``或标签
if（svgText.indexOf（'
<div data-bind="renderSvg: mySvgField"></div>

function renderSvg(element, valueAccessor, allBindingsAccessor, viewModel) {
    var rawVal = valueAccessor();
    var svgText = ko.utils.unwrapObservable(rawVal);

    if (!svgText) {
        element.innerHTML = '';
    } else {
        element.innerHTML = '';

        if (svgText.indexOf('<svg') > 0){
            svgText = svgText.substr(svgText.indexOf('<svg'));
        }

        if (!$.browser.msie || $.browser.version > 8){
            //normal browsers
            window.svgweb.appendChild($(svgText)[0], element);
        } else {
            //IE 8
            var $svg = $(svgText);
            var svg = document.createElementNS(svgns, 'svg');

            svg.setAttribute('width', $svg.attr('width'));
            svg.setAttribute('height', $svg.attr('height'));

            $.each($svg.children(), function(i, el){
                var path = document.createElementNS(svgns, el.tagName);

                for (var i = 0, allAttributes = el.attributes, len = allAttributes.length; i < len; i++){
                    path.setAttribute(allAttributes.item(i).nodeName, allAttributes.item(i).nodeValue);
                }
                svg.appendChild(path);
            });
            window.svgweb.appendChild(svg, element);
        }
    }
}