html - SVG 在 firefox 上运行良好，但它在其他浏览器上的定位发生了变化

Question

我已经为多边形添加了一个 SVG 并进行了必要的定位。它在 firefox 上运行良好，但在其他浏览器上定位发生了变化。我分别在 firefox 和 Chrome 中附上了屏幕截图。为什么会这样？

  svg{
      position: absolute;
      z-index: 1;
      left: 17%;
      top: -23%;
    }
  .circle {
      background: #b7a3a3;
      height: 600px;
      width: 600px;
      border-radius: 50%;
      margin: 0 auto;
      position: relative;
   }

  <div class="flex-auto flex items-center justify-center w-100">
            <div class="w-100">
              <svg class="w-100 white debug-grid mb4 db"viewBox="0 0 1000 1000" stroke="#fff" fill="none" stroke-width="50"
                   id="js-svg">
                <polygon id="js-polygon" points="601.4282075197532,484.74767078498866 522.9616144951742,592.7476707849887 396,634 269.03838550482584,592.7476707849887 190.57179248024684,484.74767078498866 190.5717924802468,351.2523292150114 269.0383855048258,243.25232921501137 395.99999999999994,202 522.9616144951741,243.25232921501132 601.4282075197532,351.2523292150113" />
              </svg>
            </div>
  </div>
  <div class="circle">
  </div>

Answer 1

你有一些问题源于那个 svg 的构成。您的 svg 在 1000x1000 单位的视框内有一个 461x468 单位的多边形，它甚至没有居中。

看起来你想要的是一个以圆为中心的十边形。在标准化你的 svg 多边形之后，css 变得更容易处理，因为你可以在不使用魔数(Magic Number)的情况下将它居中。

为了标准化多边形，我取了点并从所有 x 坐标中减去最小的 x 坐标，对 y 坐标执行相同操作。然后将一半的笔画宽度添加到所有坐标。然后，viewbox 需要适应最大坐标加上笔画宽度的一半。

我已将 svg 绝对定位在圆圈内以使其居中。圆圈设置为 height:0 和 padding-top:100% 以保持 1:1 的纵横比。

如果您想使用 Bootstrap 定位并建立 600 像素的宽度，请将这些样式应用于父元素。

svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.circle {
  background: #b7a3a3;
  height: 0px;
  padding-top: 100%;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

<div class="circle">
  <svg viewBox="0 0 461 486" stroke="#fff" fill="none" stroke-width="50" id="js-svg">
                <polygon id="js-polygon" points="435.856415039507,309.747670784988	
357.389822014928,417.747670784988	
230.428207519754,459	
103.466593024579,417.747670784988	
25,309.747670784988	
25,176.252329215011	
103.466593024579,68.252329215011	
230.428207519753,27	
357.389822014928,68.252329215011	
435.856415039507,176.252329215011" />
              </svg>
</div>