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

我正在尝试为某人的显示SVG的库更新/添加功能。可以在此处找到该库的演示：。来源：此处：。它是（P）react，但主要是我链接到的SVG（我相信）

因此，这个库是GitHub贡献日历的再创造，加上这里和那里的一些东西。当前的行为是，无论屏幕大小如何，整个日历都适合父元素。所以在较大的父母身上，它向上扩展，在较小的父母身上，它向下扩展。我试图解决的问题是，在较小的屏幕（如手机）上，将完整的日历调整到允许的宽度会压缩组件，使其无法读取

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

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

现在我已经尝试了很多方法，我相信

preserveSpectratio=“xMaxYMid slice”

就是我想要的（）但我似乎无法让它工作。我不太明白高度/宽度、viewbox和PreserveSpectRatio是如何排列的。似乎PreserveSpectratio完全被忽略了，我不知道为什么

---

沙盒：

最好创建一个小型的可重复生成的svg代码示例，这样我们就可以关注它了？我提供了一个源代码和运行示例的链接。将这里的代码复制到一个任何人都可以运行的沙盒中，我想说的是，不是沙盒用户，所以不知道这个东西是如何工作的，但我在那里导入了相同的repo。希望这就是您的想法。创建一个小型可重复生成的svg代码示例会很好，这样我们就可以关注它了？我提供了一个源代码和运行示例的链接。将这里的代码复制到一个任何人都可以运行的沙盒中，我想说的是，不是沙盒用户，所以不知道这个东西是如何工作的，但我在那里导入了相同的repo。希望这就是你的想法。