SVG外部对象大小不一致

Question

我试图在SVG中制作2个html对象，并在Vis.js图中进一步使用它们。我的第一个svg（按钮）按预期工作，看起来不错。我的问题是，当我尝试插入表格div时，宽度/高度不是我设置的那样。

这是我得到的：

正如您所看到的那样，按钮比红色框大，即使红色框具有更大的宽度和高度（1000px x 800px对比220px x 68px）！

这是我的JavaScript：

// THE RED BOX
const tableComponent =
`<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="800px">
<foreignObject x="0" y="0" width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width: 100%; background-color: red;">
  <p>Here is a paragraph that requires word wrap</p>
</div>
</foreignObject>
</svg>`;

// THE ORANGE BUTTON
const buttonComponent =
  `<svg xmlns="http://www.w3.org/2000/svg" width="220px" height="68px">
  <foreignObject x="0" y="0" width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width: 100%;">
    <button style="width: 100%; height: 100%; font-size: 20px; color: white; background-color: #FF9700; border-radius: 8px; border: none;">Order Filling</button>
  </div>
  </foreignObject>
  </svg>`;


const tableComponentUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(tableComponent);
const buttonComponentUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(buttonComponent);

const nodes = new DataSet([
  { id: 1, image: buttonComponentUrl, shape: 'image' },
  { id: 2, image: tableComponentUrl, shape: 'image' },
  { id: 3, label: 'Node 3', shape: 'box' }
]);
// create an array with edges
const edges = new DataSet([
  { from: 1, to: 2, arrows: 'to' },
  { from: 1, to: 3, arrows: 'to' }
]);
// create a network
const container = document.querySelector('.data-source-container');
const data = {
  nodes: nodes,
  edges: edges
};
const options = {
  edges: { smooth: false }
};
const network = new Network(container, data, options);

Answer 1

好吧，SVG是可缩放的矢量图形，其内部尺寸与用户看到的尺寸无关（更准确地说：用户看到的对象的x尺寸为x_orig*scale，其中{ {1}}是SVG内部的x维度，x_orig是由整个SVG元素的x维度设置的因子。

换句话说（假设其他部分正常工作，如果其他部分正常工作，您已经发明了一个有趣的技巧来扩展vis.js插入html的可能性），则必须设置图片的尺寸。尝试在相应节点的选项中使用size, scale or shapeProperties.useImageSize。不过，我看不到调整宽高比的选项，因此这可能需要在SVG本身内部进行其他调整（例如，甚至设置其尺寸）。

让我知道它的运行方式，这是一种非常有趣的方法。