SVG неправильно масштабируется в Chrome - PullRequest
Новая
       39

SVG неправильно масштабируется в Chrome

0 голосов
/ 31 мая 2019

У меня есть SVG (упрощенно для вопроса) с max-height: 100%;.Я не знаю ширину элемента (рассчитывается во время выполнения).Я хочу, чтобы он имел соотношение сторон 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 в моем случае)

1 Ответ

3 голосов
/ 31 мая 2019

Это странный способ изменения размера встроенных элементов .Вы находитесь в очень особом и неясном случае, когда отношение известно, и поэтому правило должно быть

Если значения 'height' и 'width' имеют вычисленные значения 'auto', а элемент имеетвнутреннее соотношение, но не внутренняя высота или ширина, тогда используемое значение 'ширина' не определено в CSS 2.2.Тем не менее, предлагается, чтобы, если ширина содержащего блока сама по себе не зависела от ширины заменяемого элемента, то используемое значение 'ширины' вычислялось из уравнения ограничения, используемого для незаменяемых элементов уровня блока в нормальном потоке.

Но тогда мы не находимся в "нормальном потоке" , поскольку у вашего элемента контейнера установлено положение absolute.

В вашем случае,вы можете реплицировать поведение FF в Chrome, назначив атрибуты width и height для вас <svg>, чтобы они больше не были неизвестны при синтаксическом анализе и по умолчанию не равнялись 300 x 150px в Chrome. 

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