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

发布于 2024-09-12 04:21:59 字数 2214 浏览 1 评论 0原文

如何使 SVG 可靠地显示而无需 HTML 中的滚动条？在 Firefox 和 Chrome 中都可以使用的东西就足够了。

最基本的步骤是 SVG 看起来很“自然” 文档中的宽度和高度。全面展开。没有滚动条。火狐浏览器一般都是这样做的。铬合金通常不会（除非我使用实际宽度和高度的先验知识）。
更高级的步骤是我给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，但是这是不正确的，属性名称是实际上，Erik 在下面正确地写了驼峰 viewBox 。

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

谢谢大家！

原文

How can I make a SVG appear reliably without scrollbars in HTML? Something that works in both Firefox and Chrome is sufficient.

The most basic step is that
the SVG appears as it's "natural"
width and height in the document.
Fully expanded. Without scroll bars.
firefox generally does this. Chrome
generally does not (unless I use prior knowledge of the actual width and height).
The more advanced step is
that I give the SVG an arbitrary
width (say 400 pixels), and the SVG
appears scaled appropriately, while preserving
it's aspect ratio. Again, no scroll
bars.

I'd prefer not to have to know the natural dimensions of the SVG in the HTML. Changing the HTML or CSS is best, though changing the SVG (once, not for every size I want do display it) would also be fine.

Is this kind of thing possible?

Here's some example html that embeds an svg.

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

The <embed> tag below can be changed to <object> or something else if needed.

Here's an example 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>

Update:

Ok, seems the tool I am using is generating SVGs with a lowercase viewbox attribute, this is incorrect however, and the attribute name is actually camelcase viewBox as Erik writes correctly below.

This combined with the width/height removal or change to percentage allows me to achieve both parts of the question.

Thanks everyone!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧伤还要旧人安 2024-09-19 04:21:59

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

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

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

If you want the svg to fill the entire width/height of the screen try this in the html document:

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

If you wanted to fill a smaller region of the document, then try removing the width and height attributes on the referenced svg root element, and make sure that there is a viewBox attribute. Then the size of the container (embed) should decide the size properly, and there should be no scollbars.

回复收藏 0 原文