SVG отображает только один элемент, фон и цвета сломаны
Пытаюсь создать SVG изображение логотипа, состоящее из 3х элементов: белой крыши, оранжевой буквы М и белых листьев по краям. Всё это на темно-синем фоне с градиентом. Написал код…
Вопросы по тегу: svg
- 3 ▲1 ответ.
- 1 ▲2 ответ.
проблема с svg в vs code
с недавних пор vs code открывает svg вот так, а не как всегда в виде кода, подскажите пожалуйста в чем проблема, что я мог сделать?
- 0 ▲1 ответ.
Почему один и тот же SVG выглядит по разному?
На странице (ссылка) есть кнопка нарисованная в svg,она дважды повторяется на странице. Несмотря на то что код абсолютно идентичный, выглядят они по разному. Сделал простую html-с…
- 0 ▲1 ответ.
SVG анимация линии
Есть кривая линия. Нужно сделать плавную зацикленную svg-анимацию волны. К примеру вот такая вот кривая <svg width="1439" height="368" viewBox="0 0 1439 368" fill="none" xmlns=…
- 0 ▲2 ответ.
Определить границы SVG изображения
Генерируется SVG файл, в котором есть rect, внутри которого много разных path фигур. Мне необходимо определить границу, в который вписываются данные фигуры (выделена красным) не з…
- 0 ▲0 ответ.
Как сделать эффект диагонального линейного градиента внутри файла SVG при наведении курсора
При наведении на SVG сторона .front заменяется стороной .back Нужно, чтобы после переворота по стороне .back проходил диагональный линейный градиент <!DOCTYPE html> <html…
- 0 ▲1 ответ.
Анимация атома из слов
Помогите пожалуйста, сделать похожую анимацию, только за место кружков будут слова. <svg width="100%" height="100%" viewBox="0 100 210 297" xmlns="http://www.w3.org/2000/svg" x…
- 0 ▲0 ответ.
Поворот группы объектов в SVG по оси Y
Не получается достигнуть результата, чтобы при наведении курсора на изображение синий щит (сторона .front) вращался по оси Y, и видно было красный щит (сторона .back) <svg clas…
- 2 ▲1 ответ.
Как запретить инвертирование цвета при темной теме браузера?
Открываю через MI Browser на Android SVG-файл, в котором находится колесо с темными секторами. Так оно открывается при светлой теме браузера: А так открывается при темной теме бра…
- 1 ▲1 ответ.
Как отобразить текст в SVG без наведения курсора с помощью JS и CSS?
Здесь описано решение, как вывести текст на SVG с помощью JS и CSS: https://ru.stackoverflow.com/questions/1275925/как-при-наведении-на-svg-добиться-появления-текста/ Возможно ли …
- 0 ▲1 ответ.
SVG не растягивается на весь блок
Есть блок с видео над видео svg-изображение, но svg не закрывает весь блок и оставляет щели. Есть ли способ это поправить ? p.s. Пробовал с помощью псевдоэлементов закрыть щели но…
- 0 ▲0 ответ.
Скопировать svg с анимацией с сайта
Пытаюсь скопировать svg с анимацией с сайта nextjs.org: но ничего не выходит: Пробовал стырить целиком сайт, но там jsx сбилженный и тоже не могу разобраться как это в нормальный …
- -2 ▲1 ответ.
Как верстать фигуры с этого макета?
Как правильно верстать все фигуры на этом макете? Мне нужно каждую SVG позиционировать или есть какой-то другой способ? Как бы это делали вы? Все бэкграунды — сделать их на всю до…
- 1 ▲0 ответ.
Как сделать фон у svg элемента фиксированным, чтобы при скролле изображение оставалось на месте?
есть <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="image" patternUnits="objectBoundingBox&qu…
- 2 ▲1 ответ.
Как svg элементу растянуть задний фон?
есть такая форма <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="image" patternUnits="userSpac…
- 0 ▲1 ответ.
SVG. Анимация при нажатии на машинку
Ссылка на SVG. При нажатии на машинку она должна передвигаться к краю экрана; При двойном нажатии на машинку она должна возвращаться обратно. НО что бы при нажатии на колеса машин…
- 5 ▲2 ответ.
Не работает использование элемента <symbol> в SVG в качестве CSS-маски
Есть файл SVG с кучей иконок. Структура файла простая: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none…
- 1 ▲1 ответ.
Анимация svg элемента (движущийся пар над стаканчиком кофе)
Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , S…
- 1 ▲1 ответ.
SVG анимация path, при изменении атрибута values анимация начинается сначала
При нажатии на блок стрелка перемещается к его правому краю. Для этого я получаю текущее значение атрибута d у path и следующее значение d, прибавляя координаты по X, затем обновл…
- 0 ▲0 ответ.
Неправильно отображается текст svg в safari
Сделал свой сайт в tilda, логотип экспортировал из ai в svg. Однако в safari слетают шрифты, в chrome все ок. Перепробовал все опции экспорта – ни на что не повлияло. Хэлп! Safari…
- 1 ▲2 ответ.
Как менять цвет svg-sprite?
Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте? Перепробовал много разных вариантов, в итоге - ничего не получилось. Если просто вставить код svg в html…
- 1 ▲1 ответ.
Анимирование позиций SVG элементов через JS
У меня есть SVG картинка. Мне нужно, чтобы при горизонтальном передвижении мыши группы svg объектов() перемещались в право и влево. Чем дальше мышь отходит от центра экрана, тем б…
- 5 ▲3 ответ.
Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?
К примеру, я хочу сделать backdrop-filter только для одной области внутри svg <svg viewBox="5 0 152 105" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cp…
- 0 ▲1 ответ.
Как поменять stroke у path иконки?
Есть следующий Vue компонент: <template> <SettingsIcon class="settings-icon" /> </template> <script setup> import SettingsIcon from '@icons/setti…
- 0 ▲0 ответ.
Появление верхней границы монтажной области элемента svg при масштабировании
Во всех браузерах при масштабировании страницы на iPhone 11, где расположено svg-изображение, появляется верхняя граница монтажной области элементов, из которых состоит изображени…
- 0 ▲1 ответ.
Не отображается polyline на странице со свойством points?
polyline = document.createElement('polyline') // задаю точки, свойство есть в документации, по факту его нет в браузере. polyline.points = '0,0 100,100' // добавляю его во внутрь …
- 0 ▲1 ответ.
Firefox обрезает SVG
Имеется фрагмент SVG, который в Chrome отображается правильно, но в Firefox(v 111.0.1) обрезается. Обрезка SVG начинается примерно со значения 17900000 по оси Y. <svg version="…
- 1 ▲1 ответ.
как сделать фигуры с закругленными углами с помощью clip и svg?
Все никак не могу сделать фигуры
- 1 ▲1 ответ.
Как передать svg в компонент?
Как передать svg в компонент? Нужно создать компонент в который я буду импортировать разные svg иконки. В компонент будет передаваться иконка и название. Пример: const ContextButt…
- 1 ▲2 ответ.
Как объеденить эти svg?
Отличаются они ВРОДЕ только цветом, но я не понимаю как их можно сделать более уникальными, и обойтись одним SVG которой я могу просто подставлять цвет. Еще хотел узнать, почему р…