嵌入式SVG经过修剪

Question

我在HTML页面中嵌入了一个SVG对象，如下所示：

<embed id="svgImg" src="bo5rkbgs5vtsmv053regld2t14.svg"
 type="image/svg+xml" />

但是，生成的图像（在Firefox和Chrome上）都会被修剪，看起来像这样：

（注意“步骤响应”和“时间”如何不正确显示）。我检查了服务器端的文件，它很好。有什么想法吗？

Answer 1

再看一下你的代码，你的svg图像仍然太小。

您需要将高度设置为100％，将图像高度设置为500px。

<embed id="svgImg" height="100%" type="image/svg+xml" src="s1d5ckv8bojltpturlonh1uap5.svg">
<svg width="576" height="500" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

...

这解决了firefox v8.0中的问题

Answer 2

只需调整viewBox属性，使其适合您的图片。

例如，你可以试试这个：

viewBox="-10 -10 596 452"

<强>更新 要使用JS动态生成viewBox，这样的东西应该可以工作：

var bbox = document.documentElement.getBBox();
var viewbox = document.documentElement.viewBox.baseVal;
viewbox.x = bbox.x;
viewbox.y = bbox.y;
viewbox.width = bbox.width;
viewbox.height = bbox.height;

请注意，这需要在svg文档上完成，因此您可能需要从嵌入它的html文档中进行访问，如果有，请查看此example。