Как я должен манипулировать svg, чтобы..?
Я лучше сразу покажу вам, какой мне нужен результат: вот видео.
Насчет анимации у меня вопросов нет.
Вопрос связан со стилями, а именно как сделать так, чтобы path(каждая "буква" в svg) был прозрачным а окружение этого элемента белым?
Вот песочница
Может быть мой подход в корне не правильный?
Дополнительно:
Ваш код смотреть времени нет, но есть кое что по лучше)
https://habr.com/ru/articles/349362/
См.п.3.1 Регламента. Также обратите внимание на п.3.6
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для манипуляции с SVG (Scalable Vector Graphics) веб-разработчики обычно используют JavaScript. SVG - это формат для описания двумерной векторной графики, который позволяет создавать интерактивные и анимированные изображения на веб-страницах.
Если вам нужно изменить или анимировать SVG на веб-странице, вам следует использовать JavaScript для доступа к элементам SVG и их свойствам. Вот несколько шагов, которые помогут вам манипулировать SVG на веб-странице:
1. Доступ к элементам SVG: Вы можете получить доступ к элементам SVG с помощью метода document.getElementById() или document.querySelector(), указав id или класс элемента SVG.
2. Изменение свойств SVG: Вы можете изменить атрибуты или стили элементов SVG с помощью JavaScript. Например, вы можете изменить цвет заливки элемента или его размер.
3. Добавление анимации: Вы можете добавить анимацию к элементам SVG, используя атрибуты или JavaScript. Например, вы можете создать анимацию изменения размера или положения элемента.
4. Использование библиотек: Существуют библиотеки JavaScript, такие как Snap.svg или D3.js, которые упрощают работу с SVG и добавляют множество дополнительных функциональностей.
Пример использования JavaScript для манипуляции с SVG:
// Получение элемента SVG var svg = document.getElementById('mySvg'); // Изменение цвета заливки элемента svg.getElementById('myShape').setAttribute('fill', 'red'); // Добавление анимации изменения размера элемента svg.getElementById('myShape').setAttribute('width', '100'); svg.getElementById('myShape').setAttribute('height', '100');
Надеюсь, эти шаги помогут вам начать манипулировать SVG на вашей веб-странице. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.