浏览器中的 SVG 缩放限制

  • 本文关键字:缩放 SVG 浏览器 svg
  • 更新时间 :
  • 英文 :


我生成了一个很大的SVG文件,但是在Web浏览器中查看它时,我无法放大到足以看到其中的所有细节。我可以在 SVG 源代码中做些什么来允许这样做吗?

SVG非常高很薄(宽1000px,高11000px(。当我在浏览器中打开它时,默认情况下,浏览器会将整个内容放入视口中,因此它就像页面中心的一条细条纹 - 太缩小而无法实际看到任何内容。浏览器允许我在一定程度上放大,但只能放大到某个点,然后无法进一步缩放。这是我可以从 SVG 代码中控制的东西吗?

<svg>元素如下所示:

<svg viewBox="0 0 1000 11000" version="1.2"  xmlns="http://www.w3.org/2000/svg">

请注意,我没有将SVG 嵌入到 HTML 页面中,我只有一个 SVG。由于最常见的 SVG 查看器是 Web 浏览器,我希望人们能够在一个浏览器中正确查看文档。

向 SVG 添加合适的height。这将迫使浏览器将其渲染得那么高(用户必须滚动才能看到整个内容(。例如 5000 像素高:

<svg height="5000" viewBox="0 0 1000 11000" version="1.2" xmlns="http://www.w3.org/2000/svg">

最新更新