在测试各种设备，方向和源材料的渲染时，我遇到了一个有趣的案例。
根据375x667比例视口的电话设备，加拿大的地图（好吧，也许是地球上第二大国家，拥有许多岛屿并不是最好的选择。），该地图占据327.0333x252.9像素的空间， Web浏览器检查器。
此路径嵌套在一系列g标签之间。但是，他们跟随（未嵌套）定义矩形的标记。此矩形的定义323x400与路径的框尺寸不成比例，从而在宝贵的视口空间中产生了大量的空白。
如何定义此矩形，并在适合视口的同时对其进行更改以符合路径的自然尺寸？
生成的HTML代码段：
<g fill="#ffffff" fill-opacity="0" focusable="true">
<rect width="323" height="400"></rect>
</g>
<g>
<g style="touch-action: none; -moz-user-select: none;" transform="translate(-0.0077,-0.7856)">
<g>
<g role="group" stroke-width="0.9960565216800756" aria-label="Series" transform="translate(0,0) scale(1.003959090909091)">
<g>
<g clip-path="url("#id-29")">
<g>
<g>
<g>
</g>
</g>
</g>
</g>
<g>
</g>
<g fill="#d9d9d9" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" focusable="true">
<g>
<g shape-rendering="auto" stroke="#ffffff" fill="#ffffff" fill-opacity="0" stroke-opacity="0">
<path d="M0.0076775583937660485,76.05864696757311[...]L0.0076775583937660485,222.15490049518075Z"></path>
</g>
</g>
</g>
</g>
</g>
<g style="pointer-events: none;" opacity="0" transform="translate(101.0077,93.81894045410156)">
<circle r="10"></circle>
</g>
<g role="group" stroke-width="0.9960565216800756" aria-label="Series" transform="translate(0,0) scale(1.003959090909091)">
<g>
<g clip-path="url("#id-82")">
<g></g>
</g>
<g></g>
<g fill="#a4a4a4" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" style="cursor: pointer;" focusable="true" fill-opacity="0.8" id="id-156">
<g>
<g shape-rendering="auto">
<path d="M169.91387280358214,136.7602231574686L[...]L242.03978113921693,186.75415049309635Z"></path>
[...]
<g fill="#bad533" stroke="#ffffff" stroke-opacity="1" stroke-width="0.9960565216800756" focusable="true">
<g>
<g shape-rendering="auto">
<path d="M292.10148344508775,306.28047397225953L[...]L279.4704374951894,307.7346226325906Z"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<g></g>
</g>
<g></g>
</g>
</g>
</g>
</g>