Исправить некорректное отображение SVG с помощью ipywidgets DOMWidget в Jupyter Notebook - PullRequest
Новая
       14

Исправить некорректное отображение SVG с помощью ipywidgets DOMWidget в Jupyter Notebook

2 голосов
/ 19 июня 2019

Резюме

Пожалуйста, посмотрите этот пример ноутбука , который не работает должным образом. Третья ячейка в блокноте должна отображать окно SVG, содержащее простое зеленое поле. Пример вывода показан в ячейке 4 *.

Подробнее

После запуска записной книжки появляется всплывающая подсказка, когда я наводю указатель мыши на элемент в консоли. Из-за этого всплывающего окна я считаю, что контейнер SVG и блок (который является элементом PATH) определенно создаются, они просто не отображаются. Всплывающее окно говорит, что они отображаются в размере 0x0.

Как заставить это работать должным образом, чтобы содержимое окна SVG отображалось в выходной ячейке (ячейка # 3)?

код

Здесь для удобства приведен код за ячейкой.

Ячейка № 1 

import ipywidgets.widgets as widgets
from traitlets import Unicode


class Test(widgets.DOMWidget):
    _view_name = Unicode('TestView').tag(sync=True)
    _view_module = Unicode('test').tag(sync=True)
    _view_module_version = Unicode('0.1.0').tag(sync=True)

Ячейка № 2 

%%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 svg = document.createElement('svg');
            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,
    };

});

Ячейка № 3 

Test()  # this cell should output a green box

Ячейка № 4: Пример вывода 

%%html
<svg>
<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" />
</svg>

* ПРИМЕЧАНИЕ: клонируйте и запустите блокнот, чтобы показать ожидаемый результат в нижней части.

1 Ответ

1 голос
/ 19 июня 2019

Понял это: по причинам, которые я не понимаю, вы должны использовать функцию document.createElementNS(), чтобы добавить SVG, а не document.createElement(). Вы также должны использовать svg.setAttributeNS() вместо 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,
    };

});
...