<svg width='0' height='0'>
<defs>
<clipPath id='example' clipPathUnits='objectBoundingBox'>
<path d="M 0 0 a 1 1 0 0 0 1 1 h -1 v -1z"/>
</clipPath>
</defs>
</svg>.example {
clip-path: url(#example);
}порядок действий
Я думал через clip-path но там нет такой плавности... даже чат джипити не понимает...
transform, а не на width или height. А в терминах трансформаций у нас для изменения размеров используются вариации функции scale():50% {
transform: scaleX(0.9) scaleY(1.1);
}transition, он будет срабатывать каждый раз, когда значения будут меняться:.items {
.single-chart {
.circular-chart {
.circle {
/* animation: progress 1s ease-out forwards; */
transition: stroke-dasharray 1s ease-out;
}
}
}
}.cube {
transform-origin: 50% 50% -25px;
}stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:
overflow: hidden. Внутри контейнера она может вылезать куда угодно, это уже не будет влиять на размер страницы в целом.
function putCircleOnPath(path, circle, percent) {
const length = path.getTotalLength();
const point = path.getPointAtLength(length * percent / 100);
circle.setAttribute('cx', point.x);
circle.setAttribute('cy', point.y);
}css.lint.vendorPrefix, смысл которой в том, что к свойству с префиксом нужно добавлять свойство без префикса, и если его нет, то это выглядит странно. В случае со stylelint - есть правило property-no-vendor-prefix. Там логика другая - в нормально выстроенном процессе сборки всю работу с префиксами на себя берет autoprefixer, соответственно само появление префиксов в коде выглядит как что-то лишнее. Если они добавляются автоматически, то писать их самому в обычных ситуациях вроде как не нужно.
position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute.
mask, и с clip-path. Суть проблемы в том, что маска применяется уже после трансформации, после поворота, и при расчете ее границ возникают сложности с округлениями до целого количества пикселей. Браузер не знает, в какую сторону лучше округлять. В результате для каких-то пикселей на границах маска применяется не так, как мы ожидаем, ее граница как бы смещается на 1px. Самый простой и безболезненный способ избавиться от проблемы в вашем конкретном случае - избавиться от масок. Нет маски - нет проблемы. Исходя из вашей задачи ничто не мешает использовать svg-иконки сразу, как есть, в виде обычных картинок, без нагораживания всей этой истории с белым квадратом, который потом обрезается.
padding сверху. А на некоторых - не добавляете. Вот он и ездит вверх-вниз внутри контейнера с overflow: hidden и обрезается. А звездочкам с абсолютным позиционированием на padding все равно, они не ездят. Это то, что нужно исправить.minimum-scale, maximum-scale и грубое user-scalable. С ними нужно быть осторожнее в продакшене, чтобы не ломать людям доступность, но в каких-то замороченых случаях отладки можно применить, чтобы забрать у эмулятора возможность что-то масштабировать и странно трактовать единицы измерения. Но, еще раз, практика эта странная, ваше верстка должна работать без таких ограничений.