html - 专注于较小屏幕上的一个区域的 SVG

Question

我正在尝试为某人的显示 SVG 的库更新/添加功能。可以在此处找到该库的演示：https ://rschristian.github.io/preact-github-calendar 。来源：https ://github.com/rschristian/preact-github-calendar/blob/b51d41ac92d3b195e14a175248e4c408404830f4/src/index.tsx#L200 。它是（P）react，但主要是我链接到的 SVG（我相信）。

所以这个库是 GitHub 贡献日历的再创作，加上一些东西。目前，行为是无论屏幕大小如何，整个日历都适合父元素。因此，在较大的父母身上，它会扩大规模，而在较小的父母身上，它会缩小规模。我要解决的问题是，在手机等较小的屏幕上，将完整的日历调整到允许的宽度确实会压缩组件并使其难以阅读。

那么 GitHub 是如何做到这一点的呢？它基本上隐藏了最左边的 x%，因此只显示最近的（右侧）数据。

但这最终是我无法解决的问题：我希望日历保持动态（我想图书馆的所有者也会如此）但在较小的屏幕上它应该被切断。我相信这意味着我想在桌面+屏幕上使用视图框，但在较小的设备上使用高度和宽度以便实际切断它。我不确定这是否是正确的想法，如果是，那么如何去做。

现在我已经尝试了很多方法，我相信preserveAspectRatio="xMaxYMid slice"这就是我想要的（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio）但我不能似乎让它工作。我不太了解高度/宽度、视图框和 preserveAspectRatio 是如何排列的。似乎 preserveAspectRatio 被完全忽略了，我不知道为什么。

沙盒：https ://codesandbox.io/s/elegant-dubinsky-8miml

标签： htmlcsssvg