Изменение цвета SVG карт при вращении в Safari 10

Быстрый ответ

Чтобы предотвратить изменение цвета SVG в Safari 10, примените CSS-трансформацию с функцией rotate3d() и задайте конкретный атрибут SVG fill:

/* Использование 3D-вращения предотвращает 'эффект Safari' */
.svg-fix {
  transform: rotate3d(0,0,1,30deg);
}

<!-- Прямое задание цвета заливки SVG для предотвращения 'осветления при вращении' -->
<svg class="svg-fix" fill="#FF0000" ... >
  <!-- Содержимое SVG -->
</svg>

Подход с применением этого простого решения обеспечит стабильность цвета вашего SVG даже при вращении в Safari 10.

Вращение: Освоение третьего измерения

Давайте вращать это в 3D

Сложное вращение выполняется с использованием rotate3d(0,0,1,deg). Этот метод позволяет избегать нежелательных сдвигов цвета в Safari 10 за счет более точного контроля процесса:

/* Сложное вращение в Safari? Без проблем! */
.complex-fix {
  transform: rotate3d(0,0,1,45deg);
}

Подробнее об этом расскажет наш спикер на видео

Кроссбраузерное тестирование: Вынужденное зло

SVG-графика ведет себя по-разному в разных браузерах, поэтому обязательно проводите тесты ваших изображений во всех доступных браузерах, включая различные версии Safari. Следите за возможными аномалиями, которые могут проявиться в Safari 10.

Анимация: Контроль за цветом

При анимации SVG-элементов необходимо всегда определять цвет fill в каждом ключевом кадре или ограничивайтесь использованием трансформаций для сохранения цвета на протяжении всей анимации:

/* SVG в движении с сохранением цвета */
@keyframes rotation-dance {
  from { transform: rotate3d(0,0,1,0deg); }
  to { transform: rotate3d(0,0,1,360deg); }
}

Визуализация

Представьте себе работу художника:

Не повернуто (🔵): Оригинальный синий цвет именно такой, как задумано. Однако после вращения в Safari 10 (🔵➡️🟢), из-за особенности отображения наш синий цвет переходит в зеленый!

Итак: Подобно тому, как неправильно настроенный фильтр может исказить оттенки, вращение SVG в Safari 10 приводит к странным изменениям цвета.

Вращать, Заменять, Повторять

После вращения вашего SVG в Safari 10 цвета могут начать «играть», заставляя вас вновь и вновь искать решения проблемы.

Вот решение:

Когда вы примените предложенное изменение, цвет SVG останется неизменным, даже при его вращении в Safari 10.

Катаемся на волне rotate3d

Точность: Превосходство в деталях

Функция rotate3d() обеспечивает высокую точность управления вращением и способна предотвратить нежелательные изменения цветов в Safari 10.

Проблемы с Субдискретизацией

Смена цветов может быть вызвана субпиксельной отрисовкой, но использование rotate3d() снижает эти проблемы, обеспечивая более плавное визуальное восприятие.

Производительность: Ускорение движка

Активация аппаратного ускорения с помощью 3D-трансформаций может потенциально улучшить производительность, а также помочь решить проблемы с отображением в Safari 10.

Погружение в CSS

Последовательность: Ключ к успеху

Используйте атрибуты презентации SVG для обеспечения последовательного отображения в разных браузерах, включая Safari.

<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/>

Замечание о свойствах SVG

Свойства SVG, такие как fill-rule и clip-rule, важны для отрисовки форм и цветов, поэтому уделяйте им внимание.

Полезные материалы

1. rotate() – CSS: Cascading Style Sheets | MDN — подробное разъяснение и примеры использования функции CSS rotate() для элементов SVG.
2. Understanding SVG Coordinate Systems and Transformations (Part 1) — Sara Soueidan, inclusive design engineer — детальное руководство по системам координат и трансформациям SVG.
3. Styling — SVG 2 — официальная спецификация W3C описывает свойства цвета SVG.
4. Safari Technology Preview Release Notes | Apple Developer Documentation — последние новости и обновления Safari, влияющие на рендеринг SVG.
5. Optimizing SVG Patterns to Their Smallest Size | CSS-Tricks – CSS-Tricks — рекомендации по оптимизации SVG для улучшения производительности и предотвращения проблем с отображением.