🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Переведите SVG-контур в CSS-функцию shape() за один вставленный путь
Функция shape() описывает произвольный контур прямо в CSS: её можно анимировать, задавать в ней проценты и единицы вроде em, использовать в clip-path и offset-path. Проблема ровно одна: писать её руками мучительно, а все реальные контуры уже нарисованы и лежат в виде d-атрибута внутри SVG.
Мэтью Морете год возился со спецификацией и выложил три маленьких инструмента, которые закрывают эту работу:
— Path to Shape переводит d из SVG-пути в синтаксис shape();
— Shape to Polygon делает обратный ход в polygon(). Пригодится как запасной вариант для браузеров без поддержки shape(), а иногда и как прямая замена: polygon() часто выходит компактнее;
— Minify Shape сжимает готовый код shape() примерно так же, как SVGO поступает с SVG.
Все три работают в браузере и написаны на SvelteKit. Автор пишет, что прогнал через них все контуры, до которых дотянулся, но на особо заковыристых путях с дугами конвертер всё ещё спотыкается — проверяйте результат глазами.
#css