如何将内联 svg 压缩到用户视口？
How to squeeze inline svg to user viewport?
我一直在尝试将我的交互式 svg 地图集成到我的 html 页面中，然后出现了一个小问题：当我将我的（内联）svg 放入标准的、非响应式的 html文档，内联 svg 会自动很好地适应用户的视口：see it here.
但是，当我尝试在我的页面上使用 bootstrap 导航栏时，内联 svg 似乎 "grow" 比正常的非 bootstrap 版本大：here it is
因此我的问题是：如何使 bootstrap 版本的行为像普通版本一样？换句话说：如何使 bootstrap 版本非常适合用户的视口？
（注意：只有当您的浏览器处于最大尺寸时您才能看到差异；请勿调整浏览器的大小）
尝试将它添加到您的 svg 元素中，我测试它时有效。
它指定 svg 的高度不应超过页面高度的 100%（减去允许边距和菜单的 80px）。
max-height: calc(100vh - 80px);
至于为什么用了Bootstrap后高度变了，我不是很确定，可能是因为页面元素多了，Bootstrap s' CSS 正在影响他们的身高。
我一直在尝试将我的交互式 svg 地图集成到我的 html 页面中，然后出现了一个小问题：当我将我的（内联）svg 放入标准的、非响应式的 html文档，内联 svg 会自动很好地适应用户的视口：see it here.
但是，当我尝试在我的页面上使用 bootstrap 导航栏时，内联 svg 似乎 "grow" 比正常的非 bootstrap 版本大：here it is
因此我的问题是：如何使 bootstrap 版本的行为像普通版本一样？换句话说：如何使 bootstrap 版本非常适合用户的视口？
（注意：只有当您的浏览器处于最大尺寸时您才能看到差异；请勿调整浏览器的大小）
尝试将它添加到您的 svg 元素中，我测试它时有效。
它指定 svg 的高度不应超过页面高度的 100%（减去允许边距和菜单的 80px）。
max-height: calc(100vh - 80px);
至于为什么用了Bootstrap后高度变了，我不是很确定，可能是因为页面元素多了，Bootstrap s' CSS 正在影响他们的身高。