Всем привет. Я стараюсь сделать анимацию для svg элементов. Вот что есть сейчас -
jsfiddle.
Проблема в том, что фотографии svg могут быть разными (от 100-500 строк кода, или от тысячи строк) и встречаться на странице несколько раз. Для той анимации которая есть сейчас, нам нужно иметь svg непосредственно в DOM. И если файл svg состоит из нескольких тысяч строк кода, то анимация загрузит систему и не будет работать гладко(
jsfiddle).
Я думаю, что svg нужно превратить в canvas, а затем работать с ним. Если это были бы обычные примитивные фигуры (круг, треугольник, квадрат) и они встретились бы один раз на странице, я мог бы нарисовать их на холсте. Но проблема в том, что это могут быть разные формы рисования( не могу знать какие). Из чего я подумал, что было бы здорово, если бы мы могли svg загрузить определенную маску и отобразить в ней точки, которые были бы анимированы после наведения курсора мыши(как сейчас с SVG по первой ссылке). Такая маска могла бы быть сделана как один path(
маска). Однако, честно говоря, я не знаю, как это сделать и возможно ли это сделать. Если я рассуждаю неверно, то поправьте меня пожалуйста, чтобы понял в каком направлении хотя бы искать информацию.
Буду очень благодарен за любую помощь, подсказки и примеры. Спасибо.
