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

Question

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

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

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

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

起初， 的 width 和 height 属性svg设置为100%。

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

问题是里面的一切svg都是相对的svg，当svg被缩放时，内容也会被缩放，我想避免内容缩放。

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

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

这是我正在应用svg的viewBox属性：

这里是 upper svg，它与 lower没有任何联系，但是在更改lower 的属性svg后仍然会受到影响：viewBoxsvg

标签： javascripthtmlcssd3.jssvg

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"等等。

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