Как компактно вставлять svg с возможностью изменения его свойства?
Всем привет.
При вёртке частенько надо вставлять SVG. Иногда они бывают огромными. Разумеется мне надо взаимодействовать с fill или stroke, поэтому вставка через тэг img не подходит.
Какие есть способы вставлять SVG и иметь возможность его изменения? Кроме как создание компонентов под SVG
Дополнительно:
Ответы:
А в чем сложность "создания компонента под svg"? В простейшем случае там просто взять его и обернуть в template, добавить в него в нужные места атрибуты и сверху script setup с логикой добавить.
В простейшем случае можно вообще классами разрулить, главное заинлайнить, например с помощью https://www.npmjs.com/package/vite-svg-loader.
Смотря в каком контексте.
Последний раз я вставлял svg во vue компонент с помощью axios. Потом прекрасно можно взаимодействовать с ним - менять цвета и тп.
Выглядит примерно так - отправляешь axios запрос на путь к своей картинке и потом контейнеру, куда ты хочешь вставить svg добавляешь innerHtml равный ответу axios.
Получается асинхронно да, но тем не менее всё работает прекрасно.
const result = await localAxios.get(PATH)
container.innerHTML = result.data
PATH - путь до svg. Типа './public/assets/svg/logo.svg'
localAxios - инстанс экземпляра axios
Если вынести путь в пропсы, получится прекрасный переиспользуемый компонент.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для компактной вставки SVG с возможностью изменения его свойств, вы можете использовать тег прямо внутри HTML кода. Это позволит вам вставить SVG изображение непосредственно на страницу и при необходимости изменить его свойства с помощью CSS или JavaScript.
Ниже приведен пример кода, демонстрирующий как вставить SVG изображение и изменить его цвет при наведении мыши:
svg { width: 100px; height: 100px; fill: black; transition: fill 0.3s; } svg:hover { fill: red; }svg { width: 100px; height: 100px; fill: black; transition: fill 0.3s; } svg:hover { fill: red; }
В данном примере мы вставляем SVG изображение с помощью тега и указываем путь к нему с помощью атрибута "d" внутри тега . Далее мы используем CSS для изменения цвета заливки и добавляем анимацию при наведении курсора.
Таким образом, вы можете компактно вставлять SVG изображения и легко управлять их свойствами с помощью CSS и JavaScript.