javascript - jointjs:svg 文本在落到纸上时被空白替换

Question

在模板中我们有 png，在放到纸上时我们用 svg 替换 cell[png]。

cell - 代表 png vectorString - png 标记

        var currentSvg = new joint.shapes.basic.pwmeter({
            position: { x: bbox.x, y: bbox.y },
            size: { height: cell.attributes.minHeight, width: cell.attributes.minWidth },
            minWidth: cell.attributes.minWidth,
            minHeight: cell.attributes.minHeight,
            markup: vectorString,
            type: cell.attributes.type,
            fileName: cell.attributes.fileName,
            isInteractive: true,
            elementClassName: cell.attributes.elementClassName,
            isAnimatedDevice: cell.attributes.isAnimatedDevice,
            attrs: {
            '.myClass': {
                  fill: '#ffffff',
                stroke: '#000000'
                      }
               }
            });

    currentSvg.addTo(Rappid.graph);

<小时/>

我们正在通过扩展 Image 来制作 pwmeter 关节.shapes.basic.pwmeter = 关节.shapes.basic.Image.extend({ 类型:'basic.pwmeter'， 初始化:函数(){ 返回joint.shapes.basic.Image.prototype.initialize.apply(this,arguments); } });

我们将 png 从模板中删除到纸张上，并获取相应 png 的 svg 标记， 我们调用 currentSvg.addTo(Rappid.graph)，在执行过程中，meter [svg] 中的所有文本都被替换为空白。

我们的文字 - 0

自动生成的代码替换了我的文本，我们无法弄清楚为什么会发生这种情况

-

上面是生成的文本 我们是 jointjs 的新手，我们认为我们在扩展过程中做错了什么。

Answer 1

我可以看到有一个markup在你的设置中。确保标记中有文本“占位符”。

在此示例中，属性 text与<text/>联系在一起元素

new joint.shapes.basic.pwmeter({
    markup: '<g><image/><text/></g>',
    attrs: {
        text: { text: '48x48' },
        image: { 'xlink:href': 'http://placehold.it/48x48', width: 48, height: 48 }
    },
    size: { width : 50, height: 50 },
    position: { x:200, y: 50},
}).addTo(graph)

但是在这里，attr text标记中没有匹配的元素，因此不会被渲染。

new joint.shapes.basic.pwmeter({
    markup: '<g><image/></g>',
    attrs: {
       text: { text: '90x90' },
       image: { 'xlink:href': 'http://placehold.it/90x90', width: 90, height: 90 }
    },
    size: { width : 90, height: 90 },
    position: { x:50, y: 50},
}).addTo(graph)

有关attr的更多信息可以在这里找到特性 http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#joint.dia.Element.presentation