嵌入的 SVG 被修剪答案

【问题标题】：Embedded SVG is trimmed嵌入的 SVG 被修剪
【发布时间】：2012-01-13 23:39:27
【问题描述】：

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

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

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

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

【问题讨论】：

在我看来，图像大小对于图像本身来说不够大。您有任何 CSS 或其他 HTML 代码供我们仔细检查吗？
@KevinAnthonyOppegaardRose 不，我没有与页面关联的任何 CSS。根据我的代码，SVG 图像应该以自然大小显示。
你有我可以看到的实时网站的链接吗？
@KevinAnthonyOppegaardRose 是的，您可以在77.70.17.3/vlab 找到它 - 点击“运行”以显示图像。
你的 SVG 图像确实有一个高度：<svg width="576" height="432" viewBox="0 0 576 432" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 尝试删除或增加它。

标签： image html svg

【解决方案1】：

只需调整您的 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。

【讨论】：

我尝试过（手动），它可以工作。问题是如何告诉 Octave（它创建我的数字）更改 viewBox。有没有办法使用 JS 来改变它？
是的，这是可能的，我会用 JS 解决方案更新答案。理想情况下，生成文件的软件应该是固定的，这样它就不会生成此类内容。另一种方法是使用 SVG Scour 预处理文件，codedread.com/scour。

【解决方案2】：

再次查看您的代码后，您的 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 中的问题

【讨论】：

它不能解决我在 Firefox 3.6.24（Ubuntu 版本）上的问题。然而，对于 height:70% ，它看起来不错（但并不完美）。标题看起来不错，但 x-label 再次被修剪。
尝试再增加一点高度。将其设置为 1000 像素，看看是否有帮助，如果有帮助，那么它只是找到适用于所有浏览器的高度的一种情况。