SVG 在 Chrome 中无法正确缩放答案

【问题标题】：SVG does not scale correctly in ChromeSVG 在 Chrome 中无法正确缩放
【发布时间】：2019-10-16 21:07:18
【问题描述】：

我有一个带有 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）

【问题讨论】：

我不会设置高度，而是使用width:100vh
我冒昧地从您的小提琴中添加了.container，因为这是导致此问题的原因。
这很有趣，但我认为这与今天也发布的question 中的核心问题完全相同（在某人的时区），即使它有几年前的差异......（而且很快- 阅读，似乎 FF 的行为是错误的，顺便说一句）。

标签： html css svg scale vector-graphics

【解决方案1】：

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

如果 'height' 和 'width' 都具有计算值 'auto' 并且元素具有固有比例但没有固有高度或宽度，则 CSS 2.2 中未定义使用的 'width' 值。但是，建议如果包含块的宽度本身不依赖于被替换元素的宽度，则“宽度”的使用值是根据用于正常流中的块级非替换元素的约束方程计算的。

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

在您的情况下，您可以通过分配您的 <svg> 的 width 和 height 属性来复制 Chrome 中的 FF 行为，以便它们在解析时不再未知，并且在 Chrome 中不要默认为 300 x 150px .

.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>

【讨论】：