jointjs：svg 文本在纸上被空白替换答案

【问题标题】：jointjs: svg text is replaced by blank on drop to paperjointjs：svg 文本在纸上被空白替换
【发布时间】：2016-10-27 08:07:04
【问题描述】：

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

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'，初始化：函数（）{ return joint.shapes.basic.Image.prototype.initialize.apply(this, arguments); } });

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

我们的文字 - 0

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

-

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

【问题讨论】：

标签： javascript svg backbone.js jointjs

【解决方案1】：

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

在此示例中，attr 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

【讨论】：