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

【问题标题】：Change the outermost svg size but preserve the size of everything inside that svg更改最外面的 svg 大小，但保留该 svg 内所有内容的大小
【发布时间】：2018-07-04 07:00:55
【问题描述】：

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

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

为了避免x-y problem，我将描述我的用例。

我有一个div。 div 有 overflow-y: scrollable。所以，这意味着当我最外层的svg（它是div 的直接子代）将变得大于div 时，我将能够滚动查看整个svg。

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

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

问题是svg 中的所有内容都与svg 相关，当svg 被缩放时，内容也会被缩放，我想避免内容缩放。

我考虑过使用viewBox 并在svg 缩放时更改它，但我最初没有viewBox，所以我不能这样做。

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

这是我的svg 应用viewBox 属性：

这里是上面的svg，和下面的svg没有任何关系，但是在下面svg的viewBox属性改变后还是会受到影响：

【问题讨论】：

不明白为什么不能添加viewBox
@RobertLongson，因为某些原因它会影响另一个svg。我将更新我的问题以反映这一点。
我想我们在这里需要一个minimal reproducible example。你能在问题中添加一个吗？
当您说“受影响”时，您的意思是较低的页面会向下移动一点吗？
@PaulLeBeau，是的，我就是这个意思。

标签： javascript html css d3.js svg

【解决方案1】：

问题是 svg 中的所有内容都与 svg 相关，当 svg 被缩放时，内容也会被缩放，我想避免内容缩放。

要阻止这种情况，您需要确保 viewBox 纵横比与 SVG 视口纵横比保持一致。

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

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

【讨论】：

但是如果我为其提供viewBox 的svg 将width 和height 设置为100% 怎么办？
在这种情况下，“缩放 SVG”等同于“缩放其父 div”。见：jsfiddle.net/xgqs0avc/3
我明白了。父母的纵横比是动态的（如果我们考虑响应性的话），所以我不能调整viewBox 并同时保留纵横比。换句话说，初始值（默认，由系统提供viewBox 也是动态的）。
是的，在小提琴中，您提供了固定大小的div，但是如果我尝试this 会怎样？如您所见，它向下移动。似乎没有解决问题的办法。 ) :
在那种情况下，那是因为我们使用的是display: inline-block。内联块的底部在文本基线上对齐。如果您改用display:block，则不会出现该问题：jsfiddle.net/xgqs0avc/14 但我认为这与您的原始问题不同。