SVG 异物大小不一致

Question

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

这是我得到的：

如您所见，尽管红色框的宽度和高度更大（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 其中 x_orig 是 SVG 内部的 x 维度，scale 是由整个 SVG 元素的 x 维度设置的因子）。

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

让我知道进展如何，这是一个非常有趣的方法。

SVG 异物大小不一致

SVG Foreign Object sizing inconsistent

svg

vis.js

vis.js-network