Путь клипа SVG не масштабируется в Firefox - работает в других браузерах - PullRequest
Новая
       22

Путь клипа SVG не масштабируется в Firefox - работает в других браузерах

0 голосов
/ 09 июля 2019

Я пытаюсь заставить мой логотип работать должным образом во всех браузерах, но я не могу заставить его работать в Firefox.

Я использую свойство transform: scale () для увеличения SVG. Я пробовал все, начиная с добавления viewbox и многих других свойств SVG. Я даже просто взял svg, напрямую экспортированный из Illustrator, и разместил его, но все безуспешно.

Код для изменения масштаба SVG выглядит следующим образом: 

var resize = function () {
  var svgPath = document.getElementById('SVGID_1_');
  var scale = ((Math.min(2048,window.innerWidth) / 425)).toFixed(2);
  var scaleStyle = 'scale(' + scale + ')';
  svgPath.style.transform = scaleStyle;
  svgPath.style.webkitTransform = scaleStyle;
}

Он корректно масштабируется везде (даже в браузерах iOS), но не в Firefox.

Мой код можно найти в прямом эфире по адресу: https://codepen.io/unrealnl/pen/agPpgy

1 Ответ

1 голос
/ 09 июля 2019

Наилучшим вариантом является использование значения objectBoundingBox для свойства clipPathUnits, применяемого к элементу <clipPath />. Это решение вообще не нуждается в js.

Должно быть что-то вроде этого: 

<svg class="svg">
  <defs>
    <clipPath id="clip" clipPathUnits="objectBoundingBox">
      <path d="..."></path>
    </clipPath>
  </defs>
</svg>

Чтобы затем применить маску, как вы делаете здесь , что-то вроде: 

.elem {
  clip-path: url(#clip);
}

Здесь - это полный рабочий пример, а здесь - детали кода для игры.

Важный совет

Вы должны реэкспортировать svg для совместимости с clipPathUnits реквизитом.

Цитата Сары Соуэдан из этой полезной статьи

Здесь важно отметить, что при использовании значения objectBoundingBox координаты, указанные для содержимого <clipPath>, должны находиться в диапазоне [0, 1] - система координат становится системой единиц, и координаты фигур внутри clipPath должны быть дробями в этом диапазоне.

Чтобы воспроизвести демо , я снова открываю svg с помощью Adobe Illustrator (но это может быть любая программа векторного редактора) и масштабирую / помещаю path в холст. 1x1 пикселей, затем реэкспортируется и вуаля!

...