JointJS：无法使用 JSON 以自定义形状显示外来对象

Question

我正在尝试在 JointJS 中定义一个包含标签的自定义形状。如果我将标记定义为字符串，它就可以正常工作：

joint.shapes.examples.CustomRectangle = joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
  markup: '<rect class="card"/><foreignObject x="10" y="10" height="60" width="100"><input xmlns="http://www.w3.org/1999/xhtml" type="text"></input></foreignObject>',

  attrs: {
    rect: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 5,
      stroke: '#000000',
      fill: 'white'
    },
  }
});

看到这个代码笔，注意输入框在方块内可见：http://jsfiddle.net/dovrosenberg/kbmwfg1a/89/

如果我在 SVG 中定义看似相同的 XML 但使用 JSON:

joint.shapes.examples.CustomRectangle = joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
  markup: [{
      tagName: 'rect',
      selector: 'rect'
    },
    {
      tagName: 'foreignObject',
      selector: 'fo',
      attributes: {
        x: '10',
        y: '10',
        width: '60',
        height: '100',
      },
      children: [{
        tagName: 'input',
        selector: 'inpt',
        attributes: {
          xmlns: 'http://www.w3.org/1999/xhtml',
          type: 'text',
        },
      }]
    }
  ],
  attrs: {
    rect: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 5,
      stroke: '#000000',
      fill: 'white'
    },
  }
});

看到这个代码笔，注意输入框是不可见的： http://jsfiddle.net/dovrosenberg/asnvwe1r/4/

当我在浏览器中查看时，生成的 SVG 看起来几乎一样。我能看到的唯一区别是 JSON 版本插入 joint-selector 属性，但我认为这无关紧要。

更奇怪的是，如果您在调试器中编辑 HTML 并对 foreignObject 标记进行微小更改（比如更改联合选择器属性之一），那么输入将变为可见。

这行不通吗？

Answer 1

多亏了 Robert Longson 的精彩评论，我才弄明白了。正确的标记如下（或参见 http://jsfiddle.net/dovrosenberg/asnvwe1r/8/）。区别在于新的 namespaceURI 键。

joint.shapes.examples.CustomRectangle = joint.shapes.standard.Rectangle.define('examples.CustomRectangle', {
  markup: [{
      tagName: 'rect',
      selector: 'rect'
    },
    {
      tagName: 'foreignObject',
      selector: 'fo',
      attributes: {
        x: '10',
        y: '10',
        width: '60',
        height: '100',
      },
      children: [{
        tagName: 'input',
        selector: 'inpt',
        namespaceURI: 'http://www.w3.org/1999/xhtml',
        attributes: {
          type: 'text',
        },
      }]
    }
  ],
  attrs: {
    rect: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 5,
      stroke: '#000000',
      fill: 'white'
    },
  }
});

JointJS：无法使用 JSON 以自定义形状显示外来对象

JointJS: Unable to display a foreignObject in a custom shape with JSON

html

javascript

svg

jointjs

foreignobject