Javascript 使用Jupyter笔记本中的ipywidgets DOMWidget修复SVG的损坏显示 总结

请看，这不符合预期。笔记本中的第三个单元格应该显示一个SVG窗口，其中包含一个简单的绿色框。示例输出如单元格4*所示

细节 运行笔记本后，当我将鼠标悬停在控制台中的元素上时，将显示一个工具提示弹出窗口。由于这个弹出窗口，我相信SVG容器和框（这是一个路径元素）肯定正在创建中，只是没有显示出来。弹出窗口显示它们的渲染大小为0x0

我如何才能使它按预期工作，以便SVG窗口的内容显示在输出单元格（单元格3）中

代码 为了方便起见，这里是每个单元格的代码

第1单元

将ipywidgets.widgets作为小部件导入
从traitlets导入Unicode
类测试（widgets.DOMWidget）：
_视图\u name=Unicode（'TestView'）.tag（sync=True）
_view_module=Unicode（'test'）.tag（sync=True）
_视图\模块\版本=Unicode（'0.1.0'）。标记（sync=True）

第2单元

单元格4：示例输出

%%%html

---

---

*注意：克隆并运行笔记本以在底部显示预期的输出。

解决了这个问题：出于我不理解的原因，您必须使用

document.createElements（）

函数来添加SVG，而不是

document.createElement（）

。您还必须使用

svg.setAttributes（）

而不是

svg.setAttribute（）

在笔记本上。代码：

%%javascript

require.undef('test');

define('test', ["@jupyter-widgets/base"], function(widgets) {
    var TestView = widgets.DOMWidgetView.extend({

        render: function() {
            TestView.__super__.render.apply(this, arguments);
            var xmlns = "http://www.w3.org/2000/svg";
            var svg = document.createElementNS(xmlns, "svg");
            svg.setAttributeNS(null, "viewBox", "0 0 100 100");
            svg.innerHTML = '<path fill-rule="evenodd" fill="#66cc99" stroke="#555555" stroke-width="2.0" opacity="0.6" d="M 0.0,0.0 L 50.0,0.0 L 50.0,50.0 L 0.0,50.0 L 0.0,0.0 z" />';
            this.el.appendChild(svg);
            console.log(svg);  // when you hover over this line in the console, you can see the SVG has been created...
        },
    });

    return {
        TestView : TestView,
    };

});

%%javascript
要求。未定义（“测试”）；
定义（'test'，[“@jupyter widgets/base”]，函数（widgets）{
var TestView=widgets.DOMWidgetView.extend({
render:function（）{
TestView.\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu；
var xmlns=”http://www.w3.org/2000/svg";
var svg=document.createElements（xmlns，“svg”）；
setAttributeNS（null，“viewBox”，“01000”）；
svg.innerHTML=''；
this.el.appendChild（svg）；
console.log（svg）；//将鼠标悬停在控制台中的这一行上时，可以看到svg已创建。。。
},
});
返回{
TestView:TestView，
};
});

啊，这真是个好发现。当你在jupyter widgets repo上发布这个问题时，我玩了一下你的代码，但我不知道出了什么问题（主要是因为我对SVG一无所知）。@PascalBugnon是的，我不知道jack关于javascript或SVG的知识，这是Suuuuuuuch一个愚蠢的问题。OMG.@pascalbugnon以及如何将SVG附加到主干视图。我发现关于如何做到这一点的每一次讨论似乎都是多年前的事了。

%%javascript

require.undef('test');

define('test', ["@jupyter-widgets/base"], function(widgets) {
    var TestView = widgets.DOMWidgetView.extend({

        render: function() {
            TestView.__super__.render.apply(this, arguments);
            var xmlns = "http://www.w3.org/2000/svg";
            var svg = document.createElementNS(xmlns, "svg");
            svg.setAttributeNS(null, "viewBox", "0 0 100 100");
            svg.innerHTML = '<path fill-rule="evenodd" fill="#66cc99" stroke="#555555" stroke-width="2.0" opacity="0.6" d="M 0.0,0.0 L 50.0,0.0 L 50.0,50.0 L 0.0,50.0 L 0.0,0.0 z" />';
            this.el.appendChild(svg);
            console.log(svg);  // when you hover over this line in the console, you can see the SVG has been created...
        },
    });

    return {
        TestView : TestView,
    };

});