1

在测试各种设备、方向和源材料上的渲染时，我遇到了一个有趣的案例。

327.0333x252.9根据网络浏览器检查员的说法，加拿大的地图（好吧，也许这个星球上拥有许多岛屿的第二大国家不是最好的选择......）在具有 375x667 比例视口的手机设备上占据一个像素空间。

该路径嵌套在一系列 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(&quot;#id-29&quot;)">
            <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(&quot;#id-82&quot;)">
            <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>
4

0 回答 0