html - SVG 在 Chrome 中无法正确缩放

Question

我有一个带有 max-height: 100%; 的 SVG(针对问题进行了简化)。我不知道元素的宽度(在运行时计算)。我希望它的宽高比为 1:1(在 Illustrator 中它是一个正方形)，而在 Firefox 中它可以工作。但在 Chrome 中大约是 4:3。

图像:(第一个在 Firefox 中，第二个在 Chrome 中) https://imgur.com/a/qzTcpr4

JSFiddle: https://jsfiddle.net/rs1bp420/

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45%;
  width: 80%;
}

svg {
  max-height: 100%;
  width: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #13ee37;
}

.cls-1 {
  fill: #13ee37;
}

<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 974">
  <title>Vector
  </title>
  <path
        class="cls-1"
        d="M853.92,142.13c-194.92-189.7-515.2-189.32-709,0-193.59,189.07-192.73,499.79,0,688.67,193.37,189.5,513.88,191.67,709.05,2.07C1048.62,643.73,1048.76,331.62,853.92,142.13Z"
        transform="translate(0)"
        >
  </path>
</svg>
</div>

我希望 SVG 在 Chrome 中是一个正方形，因为边框(或者在我的例子中是 box-shadow)

Answer 1

这是 inline-replaced elements should get resized 的一个怪癖.您处于一个非常特殊且不清楚的情况下，比率是已知的，因此规则应该是

If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width, then the used value of 'width' is undefined in CSS 2.2. However, it is suggested that, if the containing block's width does not itself depend on the replaced element's width, then the used value of 'width' is calculated from the constraint equation used for block-level, non-replaced elements in normal flow.

但是，这里我们不是“正常流”，因为您的容器元素的位置设置为 absolute .

在您的情况下，您可以通过分配 width 在 Chrome 中复制 FF 行为和 height你的属性<svg>这样它们在解析时就不再是未知的，并且在 Chrome 中不会默认为 300 x 150 像素。

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 45%;
  width: 80%;
}

svg {
  max-height: 100%;
  width: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #13ee37;
}

.cls-1 {
  fill: #13ee37;
}

<div class="container">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 974" width="100%" height="100%">
  <title>Vector
  </title>
  <path
    class="cls-1"
    d="M853.92,142.13c-194.92-189.7-515.2-189.32-709,0-193.59,189.07-192.73,499.79,0,688.67,193.37,189.5,513.88,191.67,709.05,2.07C1048.62,643.73,1048.76,331.62,853.92,142.13Z"
    transform="translate(0)"
    >
  </path>
</svg>
</div>