Html 处理大型svg图像的技术

我想让svg完全扩展到视口之外，这样所有形状都不会挤压在一起。然后我将添加平移和缩放，我知道如何做

但是，如何才能让svg完全展开，使所有形状都不会挤压在一起，文本标签都显示它们的文本，而不会相互重叠

在我的示例中，svg仍在尝试将其所有内容放入svg视口。我想让它在视口外展开，这样就不会有任何重叠，并使用缩放和平移来查看图像

这些大型图像是例外，而不是常态

我创造了一个例子来说明这个问题

此时，我的viewBox设置为：

<svg opacity="1" preserveAspectRatio="xMinYMin meet" viewBox="0 0 817 664" style="opacity: 1;">
  <!-- child nodes -->
</svg>

---

我认为这不仅仅是一个设计问题。 另一种解决方案是使用某种方法来更改SVG的

viewBox

，并旋转文本以避免重叠，或多或少是这样。在这种情况下，我使用输入类型范围来更改

视图框

，但您可能会决定选择不同的解决方案

const SVG\u NS=http://www.w3.org/2000/svg';
常量SVG_XLINK=”http://www.w3.org/1999/xlink";
设A=-1200；
设B=1200；
设hexArray=[]
函数（r）{
让分数=”；
对于（设i=1；i如何定义“完全展开”？SVG是矢量图形，因此没有“完全尺寸”概念。此外，许多组件本身都有重叠的部分，因此，再多的缩放也不会减轻重叠。也许您应该尝试以不同的方式组织信息。例如，对于文本，您可以尝试使用工具提示。或者，您可以在SVG上拖动时动态操作viewBox。我建议使用类似于剪切的方式你让我走上了正确的道路。我有一个计划：）。谢谢