Question

如果没有HTML中的滚动条，我怎样才能使SVG可靠地显示？可以在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>

＆lt; embed＆gt;下面的标记可以更改为＆lt; object＆gt;或者其他需要的东西。

这是一个示例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，但这是不正确的，并且属性名称实际上是camelcase viewBox，因为Erik在下面正确写道。

这与宽度/高度的消除或百分比的变化相结合，使我能够实现问题的两个部分。

谢谢大家！

Answer 1

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

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

如果要填充文档的较小区域，请尝试删除引用的svg根元素上的width和height属性，并确保存在viewBox属性。然后容器（嵌入）的大小应该适当地决定大小，并且应该没有scollbars。

Answer 2

尝试：

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

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

这将在视网箱属性填充后生效。

如何在html中没有滚动条的情况下显示SVG

2 个答案: