如何使 SVG 在 html 中显示没有滚动条答案

【问题标题】：How to make SVG appear without scroll bars in html如何使 SVG 在 html 中显示没有滚动条
【发布时间】：2010-07-29 14:56:22
【问题描述】：

如何使 SVG 在 HTML 中没有滚动条的情况下可靠地显示？在 Firefox 和 Chrome 中都可以使用的东西就足够了。

最基本的步骤是 SVG 看起来很“自然” 文档中的宽度和高度。全面展开。没有滚动条。 Firefox 通常会这样做。铬合金一般不会（除非我使用实际宽度和高度的先验知识）。
更高级的步骤是我给 SVG 一个任意的宽度（比如 400 像素）和 SVG 出现适当缩放，同时保留它的纵横比。再次，没有滚动酒吧。

我宁愿不必知道 HTML 中 SVG 的自然尺寸。更改 HTML 或 CSS 是最好的，但更改 SVG（一次，不是针对我想要显示的每种尺寸）也可以。

这种事情可能吗？

这是一些嵌入 svg 的示例 html。

<html>
    <head><title>SVG Sizing</title></head>
    <body>
        <embed type="image/svg+xml" src="test.svg">
    </body>
</html>

如果需要，可以将下面的标签更改为

这是一个示例 test.svg：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1200px" height="297px" version="1.1" viewbox="0 0 1200 297" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="1" text-rendering="geometricPrecision">
    <text x="300" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> A </text>
    <text x="900" y="15" textLength="8" font-family="Helvetica" font-size="12" fill="black" text-anchor="middle"> B </text>
    <line x1="300" y1="22" x2="300" y2="47" stroke="black"/>
    <line x1="900" y1="22" x2="900" y2="47" stroke="black"/>
    <text x="587" y="37" textLength="25" font-family="Helvetica" font-size="12" fill="black"> Start </text>
    <line x1="300" y1="272" x2="300" y2="297" stroke="black"/>
    <line x1="900" y1="272" x2="900" y2="297" stroke="black"/>
    <text x="583" y="287" textLength="32" font-family="Helvetica" font-size="12" fill="black"> Finish </text>
    <line x1="150" y1="284" x2="582" y2="284" stroke="black" stroke-dasharray="2,2"/>
    <line x1="618" y1="284" x2="1050" y2="284" stroke="black" stroke-dasharray="2,2"/>
</svg>

更新：

好的，我使用的工具似乎是生成带有小写 viewbox 属性的 SVG，但是这是不正确的，并且属性名称实际上是驼峰式 viewBox，正如 Erik 在下面正确写的那样。

这与删除宽度/高度或更改为百分比相结合，使我能够解决问题的两个部分。

谢谢大家！

【问题讨论】：

标签： html svg image-scaling

【解决方案1】：

如果您希望 svg 填充屏幕的整个宽度/高度，请在 html 文档中尝试：

<style>
html, body { margin:0; padding:0 }
embed { width: 100%; height: 100% }
</style>

如果您想填充文档的较小区域，请尝试删除引用的 svg 根元素上的宽度和高度属性，并确保存在 viewBox 属性。那么容器（嵌入）的大小应该适当地决定大小，并且不应该有scollbars。

【讨论】：

【解决方案2】：

试试：

<svg width="100%" height="100%" ...>

然后图像将被调整为的大小（请注意，您应该使用）。

这将在 viewbox 属性被填充后起作用。

【讨论】：

这似乎不起作用。结果页面在 Firefox 和 chrome 中都显示了一个严重裁剪的 SVG 图像。
将宽度和高度指定为 100% 与完全不指定这些属性相同。