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

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

我正在尝试在 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',}]
    }
  ],}
});

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

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

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

这不应该吗？

解决方法

感谢 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'
    },}
});