#css #css3 #svg
Никак не могу понять как правильно выставить stroke-dasharray и stroke-dashoffset.
у меня результат на картинке сверху, снизу показано как нужно, и различия наложения(
позиция чуть не та (нужно больше против часовой, и визуально нужно чуть больше оранжевого
и меньше томатного цвета) никак не могу осознать что нужно вбить
svg {
border: 1px solid #dddddd;
}
Ответы
Ответ 1
Посмотрите примеры c stroke-dasharray, совсем немного строчек кода: Анимация бордюра из средней точки Весь секрет действия в этой строчке: attributeName="stroke-dasharray" from="0 152.2 0 152.2" to="0 0 304.4 0" Трафарет лоадера с бегунком Всё действие в этой строчке:Пример реализации stroke-dasharray с помощью JS Пример универсального решения, когда изменяя значения переменных в скрипте можно получить любое количество сегментов на окружности Анимация CSS начинается после наведения курсора const SVG_NS = 'http://www.w3.org/2000/svg'; let R = 40; let perimeter = 2*Math.PI*R let dash = .8*perimeter/6; let gap = .2*perimeter/6; let dasharray = document.createElementNS(SVG_NS, 'circle'); dasharray.setAttributeNS(null, "r", R); dasharray.setAttributeNS(null, "stroke-dasharray", `${dash}, ${gap}`); svg.appendChild(dasharray); circle { stroke-width:20px; stroke:purple; fill:transparent; } circle:hover { stroke:dodgerblue; -webkit-animation: rotate 6s linear infinite; animation: rotate 6s linear infinite; } @-webkit-keyframes rotate { 100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} } @keyframes rotate { 100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} } Это всё лирика, вернемся к практике. Вопрос автора в итоге - разбивка окружности на равные сектора и расположение одного из секторов относительно вертикальной координаты. На видимый конечный результат влияют четыре фактора: Радиус окружности stroke-dashoffset - сдвиг начала линии. Чтобы исключить его влияние установим stroke-dashoffset="0" Положение начальной точки, именно от неё будет рисоваться первый сектор прерывистой линии. Для окружности это положительная ось "Х". Чтобы отсчет вести от вертикальной линии, повернем окружность против часовой стрелки на 90 градусов. transform=" rotate(-90 175 175)" stroke-dasharray Как всё же просчитать параметры Stroke-dasharray? stroke-dasharray="30 35" "30" - длина черточки, "35" длина пробела. При равенстве значений можно писать только одну цифру. stroke-dasharray="30 35 30 5" Две пары значений, как в примере с бордюром см. выше В этом случае - Длина черты - длина пробела - длина черты - длина пробела Подробнее здесь, здесь и здесь Два сектора Допустим нам надо разбить круг на два равных сектора. Первый сектор займет черта, второй сектор - пробел. Длина всей окружности при радиусе = 50px составит с=2 х 3.14 х 50 = 314 px. Длина сектора = 157px или 180° stroke-dasharray="157 157" Линия длиной 314px над кругом,- это развертка круга с длиной окружности -314px Цветные точки - начальные точки рисования. На окружности от начальной точки по часовой стрелке отрисован первый сектор - (черта stroke-dasharray) - оранжевого цвета и второй сектор томатного цвета это,- пробел stroke-dasharray Вверху по линии от начальной точки, первый оранжевый сектор - черта, томатный отрезок - пробел. Три сектора Длина сектора = 314 / 3 = 104,7 или 120° stroke-dasharray="104.7 104.7" Я не случайно добавил в примерах линию длиной равную длине окружности. Без неё уже был бы непонятен результат. Ожидали увидеть три сектора окружности одной длины, а получили два сектора, разной длины. Сейчас понятно, что два соседних сектора окружности сомкнулись. Четыре сектора Длина сектора = 314 / 4 = 78,5 или 90° stroke-dasharray="78.5 78.5" Здесь всё просто,- каждый сектор занял свою четверть окружности (90°) Две черты и два пробела stroke-dasharray Шесть секторов Длина сектора = 314 / 6 = 52,3 или 60° stroke-dasharray="52.3 52.3" Начал проясняться алгоритм для секторов с равными промежутками,- Удваиваем количество закрашенных секторов, находим длину одного сектора и подставляем в stroke-dasharray Проверяем на примере автора вопроса. Надо 5 закрашенных секторов итого вместе с равными промежутками нужно делить длину окружности на 10 частей. 10 секторов Длина дуги сектора = 314 / 10 = 31,4 или 36° stroke-dasharray="31.4 31.4" Нам нужно повернуть против часовой стрелки верхний оранжевый сектор, чтобы вертикальная линия делила его по середине. Можно сделать это двумя способами: Повернуть на 108° градусов против часовой стрелки оранжевый круг. Расчет: В крайнем примере у нас уже повернуто на 90° градусов и доворачиваем до середины сектора ещё 18° градусов (весь сектор 36°) итого: Вариант с поворотом сектора Вариант с отступом Во всех предыдущих примерах мы имели нулевой отступ и начало сектора совпадало с вертикальной линией. Теперь, чтобы сдвинуть сектор на половину его дуги = 31.4 / 2 = 15.7 Используем - stroke-dashoffset="15.7" Решение вопроса автора stroke-dasharray="31.4 31.4" и stroke-dashoffset="31.4" Вот если бы я сразу дал такой ответ, что вам нужно вбить? Это помогла бы? Да, но один раз, и следующая подобная задача вызвала бы без знания теории точно такие же мучения, как были с первым примером. Не поленитесь, прочитайте пожалуйста "много буков" выше. Ответ 2
Хотелось ещё добавить информации по анимации, вдруг кому-нибудь она будет полезна и подвигнет сделать на основе примеров, что-то своё.* Вращение по часовой стрелке В пример "10 секторов" из первого ответа добавлена всего одна команда, реализующая вращение по часовой стрелке:Ниже полный код: Вращение против часовой стрелки Обратите внимание, сравнивая с первым примером анимации,- в атрибуте анимации "values" параметры 314;0 поменялись местами. Вращение в обе стороны с паузой Пауза достигается повторением начальных и конечных значений stroke-dashoffset
Комментариев нет:
Отправить комментарий