嵌入式SVG被裁剪了。

Question

嵌入式SVG被裁剪了。

3

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

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

然而，生成的图像（在Firefox和Chrome上）被裁剪了，看起来像这样：

enter image description here

（注意“Step Response”和“Time”没有正确显示）。我已经检查了服务器端的文件，一切正常。有什么想法吗？

- Pantelis Sopasakis

看起来图像大小不足以容纳图像本身。您是否有任何CSS或其他HTML代码供我们查看以进行双重检查？ - Kevin Anthony Oppegaard Rose

@KevinAnthonyOppegaardRose 不，我没有与页面相关联的CSS。根据我的代码，SVG图像应该以自然大小显示。 - Pantelis Sopasakis

你有一个可以看到实际网站的链接吗？ - Kevin Anthony Oppegaard Rose

@KevinAnthonyOppegaardRose 是的，您可以在 https://77.70.17.3/vlab/ 找到它 - 点击“运行”以显示图像。 - Pantelis Sopasakis

你的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">

尝试删除它或增加它。 - Kevin Anthony Oppegaard Rose

@KevinAnthonyOppegaardRose 好的...我稍微降低了高度，现在图的标题至少显示正确了。但是x轴标签的问题仍然存在。 - Pantelis Sopasakis

2个回答

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 文档中访问它，请参阅此示例。

- Erik Dahlström

我手动尝试过，它可以工作。问题是如何告诉Octave（创建我的图形）更改viewBox。是否有一种使用JS更改它的方法？ - Pantelis Sopasakis

是的，这是可能的，我会用JS解决方案更新答案。生成文件的软件最好修复，以便不会生成这样的内容。另一种方法是使用SVG Scour预处理文件，http://www.codedread.com/scour/。 - Erik Dahlström

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Anthony Oppegaard Rose · Accepted Answer

经过再次查看您的代码后，发现您的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的问题。