具有数据绑定的节点样式

Question

我正在尝试设计自定义节点，如下所示：

我知道background-image选择器的node可以设置为SVG文件，但这对我来说还不够：我需要的是将SVG数据绑定到属性中的属性节点（例如，名称应来自data(name)。属性也是如此。

我可以用cytoscape.js来实现吗？

修改

根据maxkfranz的回答，我尝试使用加载SVG的函数，但由于某种原因它没有用（我得到空白节点）：

var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: myEles,
    layout: {
        name: 'circle'
    },
    style: cytoscape.stylesheet().selector('node').css({
            'background-color': 'orange',
            'border-width': '6px',
            'background-image': generateSvg,
            'shape': 'roundrectangle',
            'width': '200px',
            'height': '90px'
    })
});

function generateSvg(node) {
    var svg;
    jQuery.ajax({
        url: 'http://localhost:8081/node-image.svg',
        success: function (result) {
            svg = result;
        },
        async: false
    });
    // modify svg
    return svg;
}

我在这里缺少什么？

Answer 1

以编程方式生成SVG。在样式表中：'background-image': generateSvg其中generateSvg( node )读取node.data()。

请参阅功能映射器：http://js.cytoscape.org/#style/mappers