SVG异物大小调整不一致 [英] SVG Foreign Object sizing inconsistent

问题描述

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

I'm trying to make 2 html objects in SVGs and further use them inside Vis.js graphs. My first svg (Button) works as intended and looks good. My problem is that when I try to insert the table div the width/height are not what I have set them to be.

这就是我得到的:

您可以看到，即使红色框的宽度和高度较大(1000px x 800px与220px x 68px)，按钮也比红色框大！

As you can see the button is larger than the red box even though the red box has a larger width and height (1000px x 800px versus 220px x 68px)!

这是我的JavaScript:

Here's my 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);

推荐答案

SVG是可缩放的矢量图形，其内部尺寸与用户看到的尺寸无关(更准确地说:x用户看到的对象的尺寸为x_orig*scale，其中x_orig是SVG内的x尺寸，而scale是由整个SVG元素的x尺寸设置的因子.)

Well, SVG is scalable vector graphics, the inner sizes has nothing to do with the sizes a user sees (more accurately: x dimensions of objects that user sees are x_orig*scale where x_orig is the x dimension inside SVG and scale is a factor set by the x dimension of the whole SVG element).

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

In other words (assuming the other parts work and if they do, you have invented an interesting hack to extend vis.js' possibilities of inserting html) you have to set the dimensions of your pictures. Try to use size, scale or shapeProperties.useImageSize in corresponding nodes' options. I can't see an option to adjust aspect ratio, though, so this may require additional tweaking inside SVG itself (like setting its dimensions even).

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

Let me know how it goes, that's quite an interesting approach that you have.

这篇关于SVG异物大小调整不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！