1. Введение
Я только недавно изучил SVG и увидел анимационный эффект неонового света, который был очень классным, поэтому я следил за статьей и сделал хитрый трюк. Атрибуты stroke-dasharray и stroke-dashoffset не очень понятны.Наконец-то разбираюсь,искав информацию и почитав документы.Надеюсь всем будет полезно.
2. Роль атрибута
Мы знаем, что SVG рисует, поэтомуstrokeСемейства атрибутов — это кисти.stroke-dasharrayа такжеstroke-dashoffsetдва свойства инсульта
stroke-dasharray
определение
Объяснение, данное официальной документацией:The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's stroke.Я так понимаю:stroke-dasharrayЭто управление виртуальной и реальной кистью с помощью сплошной линии и пунктирной линии для управления живописью.
Объем
допустимыйshape(форма) иtext content elements(элемент шрифта)
параметр
Далее остановлюсь на его параметрах.Это наверное самое непонятное место для всех. Как следует из названия, dasharray представляет собой массив отрезков линий. Его параметры могут быть массивом. Что означает каждый параметр? В официальной документации поясняется: **Первое значение и каждое второе значение в списке после него указывает длину тире, а каждое второе значение указывает длину промежутка между тире.** Это означает, что одиночное значение представляет длину сплошной линии, а двойное значение представляет длину пунктирной линии.
пример
Длина стороны каждого большого квадрата на следующем рисунке равна 100 пикселей, а начальная длина отрезка равна 200 пикселей.
stroke-dasharray: 0;
На данный момент штрих-дашаррай не работает,Примечание. Это свойство будет недействительным, если его параметр
stroke-dasharray: 20;
Видно, что длина сплошной линии действительно 20px.Почему пунктирная линия тоже 20?Объяснение, данное официальным документом здесь:If the list has an odd number of values, then it is repeated to yield an even number of values.То есть, если количество параметров единственное, копия параметров будет скопирована по умолчанию, например, 1 2 3 станет 1 2 3 1 2 3 шестью параметрами.
troke-dasharray: 120;
Само собой разумеется, что в случае с параметром пунктирная и сплошная линии должны быть одинаковой длины, здесь длина не равна, понятно, что изображается отрезок, а лишняя часть будет скрытый. Но если это замкнутый граф, результат тот же
Здесь то же самое для нескольких параметров параметра.По сути, он рисуется последовательно в соответствии с длиной сплошной линии и пунктирной линии, поэтому здесь не будет проверяться.
Кроме того, его параметр также может быть процентным, так что его можно использовать точно, не зная общей длины.Если вы хотите узнать общую длину, вы можете использовать js для получения атрибута pathLength элемента Path.
var path = document.querySelector('path');
var length = path.getTotalLength();
stroke-dashoffset
пониматьstroke-dasharrayтогда поймиstroke-dashoffsetэто просто
определение
Официальная документация:The stroke-dashoffset property specifies the distance into the repeated dash pattern to start the stroke dashing at the beginning of the path. If the value is negative, then the effect is the same as dash offset d:Это означает: величина смещения от начальной точки чертежа, положительное значение (смещение вправо или по часовой стрелке), отрицательное значение (влево или против часовой стрелки)
Формула расчета смещения:
d = s - | 'stroke-dashoffset' | mod s
d:偏移量 s:线段总长度 'stroke-dashoffset':参数值
Из формулы мы видим, что смещение является значением интервала, независимо от того, насколько велико значение параметра, смещение не будет больше, чем общая длина отрезка линии
Объем
то же, что и вышеshape(форма) иtext content elements(элемент шрифта)
И может поддерживать анимацию, чтобы добиться крутых эффектов
параметр
Кроме того, поскольку мы фактически установилиstroke-dashoffsetПараметр не будет больше длины отрезка, вычислять по приведенной выше формуле затруднительно, его можно понять и в обратном порядке, смещение это положительное (влево или против часовой стрелки)/отрицательное (вправо или по часовой стрелке) смещение.stroke-dashoffsetРазмер параметра.
пример
stroke-dasharray: 120;
stroke-dashoffset: 0;
Выше приведено начальное состояние, параметр равен 0, смещения нет.
stroke-dasharray: 120;
stroke-dashoffset: 20;
При параметре 20 согласно пониманию официального документа: d=200 - 20 mod 200=180 смещается на 180px вправо Из рисунка хорошо видно, что отрезок сместился влево на 20px, значит мы можем понять, что мы хотим сместить значение параметра влево, а замкнутый график против часовой стрелки, можете попробовать сами. Отрицательные значения такие же, как показано ниже
stroke-dasharray: 120;
stroke-dashoffset: -20;
Суммировать
К этому моменту мы в основном поняли роль атрибутов stroke-dasharray и stroke-dashoffset, а также значение параметров.Поскольку stroke-dashoffset — это замкнутый цикл, мы можем использовать эффекты анимации для создания классных эффектов SVG, таких как:Неоновый шрифт
Впервые пишу статью в Наггетс, извините за проблемы с версткой!