Вопросы с меткой [svg]

SVG (от англ. Scalable Vector Graphics - масштабируемая векторная графика) - язык разметки двумерной масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.

Фильтрация
Сортировка
Метки
3 голоса
1 ответ
94 показа
+100

Не работает использование элемента <symbol> в SVG в качестве CSS-маски

Есть файл SVG с кучей иконок. Структура файла простая: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none"> <...
Инквизитор's user avatar
1 голос
1 ответ
62 показа

Анимация svg элемента (движущийся пар над стаканчиком кофе)

Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , SVG Artista , svg path,...
Rusnus's user avatar
  • 11
1 голос
1 ответ
26 показов

SVG анимация path, при изменении атрибута values анимация начинается сначала

При нажатии на блок стрелка перемещается к его правому краю. Для этого я получаю текущее значение атрибута d у path и следующее значение d, прибавляя координаты по X, затем обновляю значение values в ...
Поляков Роман's user avatar
0 голосов
0 ответов
21 показ

Неправильно отображается текст svg в safari

Сделал свой сайт в tilda, логотип экспортировал из ai в svg. Однако в safari слетают шрифты, в chrome все ок. Перепробовал все опции экспорта – ни на что не повлияло. Хэлп! Safari Chrome
Степан Рыбников's user avatar
1 голос
2 ответа
77 показов

Как менять цвет svg-sprite?

Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте? Перепробовал много разных вариантов, в итоге - ничего не получилось. Если просто вставить код svg в html - таких проблем не ...
Ivan Malovichko's user avatar
1 голос
1 ответ
21 показ

Анимирование позиций SVG элементов через JS

У меня есть SVG картинка. Мне нужно, чтобы при горизонтальном передвижении мыши группы svg объектов() перемещались в право и влево. Чем дальше мышь отходит от центра экрана, тем больше каждый слой ...
BRO_Fedka's user avatar
4 голоса
3 ответа
144 показа

Существует ли хотя бы жалкое подобие backdrop-filter blur для внутренних тегов SVG?

К примеру, я хочу сделать backdrop-filter только для одной области внутри svg <svg viewBox="5 0 152 105" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cp"> ...
Monkey Mutant's user avatar
0 голосов
1 ответ
13 показов

Как поменять stroke у path иконки?

Есть следующий Vue компонент: <template> <SettingsIcon class="settings-icon" /> </template> <script setup> import SettingsIcon from '@icons/settings.svg' </...
Meekwest's user avatar
0 голосов
0 ответов
35 показов

Появление верхней границы монтажной области элемента svg при масштабировании

Во всех браузерах при масштабировании страницы на iPhone 11, где расположено svg-изображение, появляется верхняя граница монтажной области элементов, из которых состоит изображение. Причем, если ...
Tew's user avatar
  • 1
0 голосов
1 ответ
25 показов

Не отображается polyline на странице со свойством points?

polyline = document.createElement('polyline') // задаю точки, свойство есть в документации, по факту его нет в браузере. polyline.points = '0,0 100,100' // добавляю его во внутрь svg // по итогу оно ...
Ренат's user avatar
0 голосов
1 ответ
51 показ

Firefox обрезает SVG

Имеется фрагмент SVG, который в Chrome отображается правильно, но в Firefox(v 111.0.1) обрезается. Обрезка SVG начинается примерно со значения 17900000 по оси Y. <svg version="1.1" ...
Ivan's user avatar
  • 11
1 голос
1 ответ
49 показов

как сделать фигуры с закругленными углами с помощью clip и svg?

Все никак не могу сделать фигуры
Dias's user avatar
  • 45
1 голос
1 ответ
85 показов

Как передать svg в компонент?

Как передать svg в компонент? Нужно создать компонент в который я буду импортировать разные svg иконки. В компонент будет передаваться иконка и название. Пример: const ContextButton = ({icon, name}) =&...
Роман Ахмедов's user avatar
2 голоса
2 ответа
58 показов

Как объеденить эти svg?

Отличаются они ВРОДЕ только цветом, но я не понимаю как их можно сделать более уникальными, и обойтись одним SVG которой я могу просто подставлять цвет. Еще хотел узнать, почему размер "иконки&...
Oliver Patterson's user avatar
0 голосов
1 ответ
26 показов

JavaScript При клике по кнопке "Проверить" ожидаю проверку примера, на фигуре. Но вместо одной проверки выполняются проверки по всей фигуре

Небольшое математическое приложение. При клике на кнопку "Продолжим?" появляется пример. Ввожу в инпут ответ. Первый пример отрабатывает штатно, но остальные два сначала проверяют истинность ...
Павел Куприянов's user avatar
2 голоса
1 ответ
36 показов

Не работают stroke-dasharray, stroke-dashoffset

Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
Serhiy Gerych's user avatar
0 голосов
0 ответов
26 показов

почему при использовании маски в svg линии светлеют?

.svg-line1 { stroke-width: 1; stroke-dashoffset: 1000; stroke-dasharray: 1000; animation: svg-line1 5s forwards; } .svg-line2 { stroke-width: 1; stroke-dashoffset: 1000; stroke-...
Vorchun's user avatar
0 голосов
0 ответов
12 показов

Как связать SVG и Google Таблицы

Есть SVG файл, такие делаются в SolidWorks Composer, также из SW можно выгрузить спецификацию в EXCEL или Google Таблицы, вопрос как отметкой флажка в, например гугл таблицах автоматом закрасить ...
Евгений Пилипюк's user avatar
0 голосов
0 ответов
32 показа

Необходимо чтобы при ударе кирки, появлялись svg-трещины

Я новичок, и я создаю анимацию, используя svg, в которой кирка ударяет по блоку, и после этого должны появляться трещины, начиная с точки, в которую попала сама кирка, в случайном направлении вниз. Я ...
user542976's user avatar
0 голосов
2 ответа
65 показов

Как изменить цвет svg в img [дубликат]

Как изменить цвет svg img { width:50%; height: 50%; } <link rel="stylesheet" href="css/style.css"> <img class="pic" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/...
nevazno_html_css_js_1's user avatar
0 голосов
1 ответ
36 показов

Различия между одним и тем же SVG элементом в Chrome и Firefox, как исправить?

Имеется следующий SVG элемент <svg height="20" width="20" viewBox="0 0 20 20" class="maplibre-gl-directions-bearings-control__waypoint-image" style="width: 50px; height: 50px; opacity: 1;">&...
smellyshovel's user avatar
  • 5,188
0 голосов
0 ответов
53 показа

СSS маскирование через svg маску

Подскажите, пожалуйста, что не так делаю с svg маской что оно не дает результат такой как на картинке ? body { margin: 0; } img { max-width: 100%; height: auto; } .hero_item { position: ...
BlackStar1991's user avatar
0 голосов
0 ответов
24 показа

Как окрасить 70% stroke в #f3ca80, а 30% в #403f4e у circle. svg

К примеру у меня есть вот такая окружность <div style="width: 100%; display: flex; justify-content: center"> <svg width="500" height="500"> <circle r="180" cx="232" cy="232" ...
David Meyster's user avatar
2 голоса
1 ответ
65 показов

Не отображается SVG из спрайта

Не отображаются иконки из спрайта через вставку use. Если вставлять через обычный img, картинка есть. Опечаток в названии иконки нет. <header class="header"> <svg width="24&...
Andrey Moskalets's user avatar
1 голос
1 ответ
46 показов

Смена SVG картинок

Hеобходимо, чтобы при нажатии на кнопку менялись SVG картинки (стрелка с зеленым фоном на белый). У меня получилось только так: белая появляется при нажатии, хотя должна сменить зеленую. document....
user avatar
1 голос
1 ответ
66 показов

Как в svg circle сделать нулевую заполненность круга

У меня есть вот такая вёрстка svg круга *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } .progressbar { max-width: 150px; font-size: 10px; --color: rgb(0, 186, 16)...
Михаил Камахин's user avatar
0 голосов
0 ответов
55 показов

Figma Как импортировать иконки из фигмы в формат шрифта

На фигме есть бесплатные иконки Iconex Freebie https://www.figma.com/file/y7LTtSgng4qVYibzYvUWJ4/Iconex---Freebie-icons-(Community) Поскольку использовать иконки в формате svg/png при верстке не ...
Tot Samiy's user avatar
2 голоса
1 ответ
53 показа

Как реализовать анимацию появления кривых линий?

При загрузке страницы , должны появляться линии по направлению точки(левые направо , правые налево), в конце анимации ,на каждой появляется точка.
Profet's user avatar
  • 387
1 голос
3 ответа
68 показов

Как плавно отрисовать svg с разной шириной строки

Всем Привет! Как можно отрисовать такую svg с одного края до другого? https://codepen.io/AlexeyArnaut/pen/ZEjPjaq <svg width="2155" height="1310" viewBox="0 0 2155 1310" fill="none" xmlns="http:...
user avatar
0 голосов
2 ответа
27 показов

Как сделать анимация svg?

Как анимировать svg так чтобы поэтапно вырисовывался слева на право? А не сразу все углы svg { stroke: violet; stroke-width: 2px; stroke-dasharray: 149; animation: path 3s linear ...
Alexsander's user avatar
0 голосов
1 ответ
114 показов

Импорт статических файлов react

Есть проект на ts, создал используя cra. Использую для стилей библиотеку vanilla-extract и по инструкции добавил craco с использованием @vanilla-extract/webpack-plugin. Встала задача импортировать ...
Александр's user avatar
0 голосов
1 ответ
33 показа

Динамичная ширина относительно текста

Есть подобное решение svg { color: #fff; fill: #fff; width: 25%; position: absolute; left: 10px; top: 20px; opacity: 1 !important; pointer-events: all !important; ...
Aleks's user avatar
  • 123
0 голосов
0 ответов
12 показов

Не полное отображение SVG в singleChildScrollView

мне нужно разместить большой svg файл на странице флаттер приложения так что бы оно скролилось как обычная свёрстанная страница, я создал простую структуру кода которая в принцыпе работает как мне ...
Lll Cilician's user avatar
0 голосов
2 ответа
41 показ

Не могу поменять цвет svg

пытаюсь изменить цвет изображения в css при помощи: .primary svg { fill: white; } .ghost:hover svg { fill: #FFFFFF; } само svg изображение я задал следующим образом: <img src="/icon-...
b.ars's user avatar
  • 1
1 голос
1 ответ
26 показов

Добавить тень к бордюру stroke svg

.spinner { animation: spinner 1.5s ease-in-out infinite; } @keyframes spinner { 0% {stroke-dasharray: 0, 100; stroke-dashoffset: 0} 50% {stroke-dasharray: 65, 35; stroke-dashoffset: -35} ...
Aleks's user avatar
  • 123
0 голосов
0 ответов
17 показов

Иконка svg в pwa приложении

"icons": [{"src": "/favicon.svg", "sizes": "any", "type": "image/svg+xml"}] Не понимаю, в яндекс браузере(...
Aleks's user avatar
  • 123
1 голос
1 ответ
122 показа

Кривые линии на HTML/CSS/SVG

Как это можно реализовать ? Пробовал вставить svg-код линии в html, но получается, что линия занимает площадь прямоугольника.
standard_name's user avatar
1 голос
2 ответа
588 показов

Как размещать svg в html

я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html. 1. Как правильно вставлять svg в html? Знаю несколько способов а какой будет ...
Cnupm's user avatar
  • 28
0 голосов
3 ответа
82 показа

Анимация SVG при наведение на родительский блок

У меня есть карточка у нее есть стрелка <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"&...
Д Д's user avatar
  • 31
0 голосов
1 ответ
28 показов

SVG анимацию прелоадера без css

Как сделать бесконечную SVG анимацию без CSS и JS с данными условиями? Есть полоса в виде прямоугольника. Полоску полностью заполняет градиент из цветов (неважно 2 цвета или 12). Этот градиент из ...
Brendan8c's user avatar
  • 329
0 голосов
0 ответов
22 показа

вставка svg-иконок с текстом под ними

Как в один блок вставить 9 иконок, чтобы 5 было на одной строке, а 4 на другой?
user537300's user avatar
0 голосов
0 ответов
15 показов

Перенос блоков svg на новую строку [дубликат]

Есть svg, которая по сути является небольшой табличкой и я столкнулся с проблемой, что примерно после ширины экрана 1000px, блоки перестают переноситься на новую строку и просто становятся ...
9024872139's user avatar
0 голосов
1 ответ
57 показов

Вставка больших svg файлов в html

Проблема в следующем имеется карта map.svg(1,5Мб). При Ховере на отдельные регионы они подсвечиваются или при других действиях.Сделал так: минимизировал файл, вставил svg код прямо в страницу, дал ...
arustomyan's user avatar
0 голосов
1 ответ
38 показов

Как сделать так, чтобы при наведении на весь svg(даже на дырки в картинке) открывалась ссылка?

Сделал ссылку в svg, работает нормально, но хочу чтобы даже при наведении на дырки этой svg на ссылку можно было всё ещё кликнуть. Подскажите пожалуйста, как это можно сделать?
BlackHawk's user avatar
2 голоса
1 ответ
31 показ

Сделать 2 иконки из одной

<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"> <path fill="#5181b8" d="M 18,0.5 C 8.3348958,0.5 0.5,8.334896 0.5,18 0.5,27.665105 8.3348958,35.500001 18,35.500001 27.665104,35....
Дмитрий Варзанов's user avatar
2 голоса
2 ответа
74 показа

Как верно подбирать viewBox, размеры

Задача в том, чтобы исходное svg весило как можно меньше. Предположим, берем готовую иконку svg, меняем ее размеры либо в большую сторону, либо в меньшу. Вопрос в том, влияет ли размер холста, размер ...
Дмитрий Варзанов's user avatar
-1 голос
2 ответа
61 показ

Нужно вставить изображения в черную область, возможно как-то через overflow-hidden

Нужно вставить изображения в черную область, возможно как-то через overflow-hidden,тогда как сделать такую форму для div ?Нужно сделать на CSS.Хелпните, плиз
Alex's user avatar
  • 1
1 голос
0 ответов
36 показов

Помогите поместить елки на цветную картинку, котора получается по этому HTML-файлу

let canvas; let canvasContext; let x = 0, y = 0; let x2 = 0, y2 = 0; let Mycolor = "silver"; window.onload = function() { canvas = document.getElementById("canvas"); canvasContext = canvas....
VictorS's user avatar
  • 11
1 голос
1 ответ
62 показа

Как можно использовать svg-анимацию из темы WordPress на своем собственном html-сайте

Вот тема WordPress: https://digitalpro.liquid-themes.com/ Я пытаюсь повторить плавную анимацию контура обрезки изображения. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3....
Alexandr_TT's user avatar
1 голос
0 ответов
38 показов

Как сделать эффект стирания svg анимация в css

Не получается сделать так, что бы рисовался черный треугольник, потом стирался (от начала к концу) и рисовался градиентный и так же сам стирался (от начала к концу). А так же зациклить все это. ...
Evgeny112's user avatar