更改最外面的svg大小，但保留该svg中所有内容的大小

Question

是否可以更改最外面的svg的大小，但保留svg内所有内容的大小？

我无法在Internet上找到解决方案。

为了避免x-y problem，我将对此进行描述。

  

我有一个div。 div具有overflow-y: scrollable。因此，这意味着当我最外面的svg（是div的直接子对象）变得比div大时，我将能够滚动查看整个{{1 }}。

     

首先，将svg的width和height属性设置为svg。

     

在必要时，我会垂直缩放100%（即，我正在增加视口），而当svg不适合svg时，我会得到一个不错的滚动条。

     

问题是div内部的所有内容都是相对于svg的，并且当svg被缩放时，内容也被缩放，我想避免内容缩放。

我考虑过使用svg并在viewBox扩展时进行更改，但是最初我没有svg，所以我不能这样做。

使用viewBox解决问题的尝试失败，因为viewBox属性会影响其他viewBox。 这是我的svg，没有应用svg属性：

这是我的viewBox的{​​{1}}属性已应用：

这里是上层svg，它没有以任何方式连接到下层viewBox，但是在下层{{ 1}}：

Answer 1

  

问题是svg内的所有内容都是相对于svg的，当svg缩放时，内容也会缩放，我想避免内容缩放。

要停止此操作，您需要确保viewBox的宽高比保持与SVG视口的宽高比相同。

例如，如果将SVG缩放为width="200"，height="600"（即纵横比为1：3），则需要确保viewBox具有相同的纵横比。例如。 viewBox="0 0 200 600"或viewBox="0 0 100 300"等

如果这不起作用，那么您需要提供该页面的有效示例，以便我们可以看到您实际上在做什么。