Вопросы с меткой [svg]
SVG (от англ. Scalable Vector Graphics - масштабируемая векторная графика) - язык разметки двумерной масштабируемой векторной графики, входящий в подмножество расширяемого языка разметки XML.
2,384
вопроса
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">
<...
1
голос
1
ответ
62
показа
Анимация svg элемента (движущийся пар над стаканчиком кофе)
Как сделать анимацию движения паров над стаканчиком? Чтобы все три волны двигались одинаково синусоидально(как змея), но при этом были статичны(неподвижны). Я пробовал SVGator , SVG Artista , svg path,...
1
голос
1
ответ
26
показов
SVG анимация path, при изменении атрибута values анимация начинается сначала
При нажатии на блок стрелка перемещается к его правому краю. Для этого я получаю текущее значение атрибута d у path и следующее значение d, прибавляя координаты по X, затем обновляю значение values в ...
0
голосов
0
ответов
21
показ
Неправильно отображается текст svg в safari
Сделал свой сайт
в tilda, логотип экспортировал из ai в svg. Однако в safari слетают шрифты, в chrome все ок. Перепробовал все опции экспорта – ни на что не повлияло. Хэлп!
Safari
Chrome
1
голос
2
ответа
77
показов
Как менять цвет svg-sprite?
Собственно, как составить каскад в css, чтобы поменять цвет svg в спрайте?
Перепробовал много разных вариантов, в итоге - ничего не получилось.
Если просто вставить код svg в html - таких проблем не ...
1
голос
1
ответ
21
показ
Анимирование позиций SVG элементов через JS
У меня есть SVG картинка. Мне нужно, чтобы при горизонтальном передвижении мыши группы svg объектов() перемещались в право и влево. Чем дальше мышь отходит от центра экрана, тем больше каждый слой ...
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">
...
0
голосов
1
ответ
13
показов
Как поменять stroke у path иконки?
Есть следующий Vue компонент:
<template>
<SettingsIcon class="settings-icon" />
</template>
<script setup>
import SettingsIcon from '@icons/settings.svg'
</...
0
голосов
0
ответов
35
показов
Появление верхней границы монтажной области элемента svg при масштабировании
Во всех браузерах при масштабировании страницы на iPhone 11, где расположено svg-изображение, появляется верхняя граница монтажной области элементов, из которых состоит изображение. Причем, если ...
0
голосов
1
ответ
25
показов
Не отображается polyline на странице со свойством points?
polyline = document.createElement('polyline')
// задаю точки, свойство есть в документации, по факту его нет в браузере.
polyline.points = '0,0 100,100'
// добавляю его во внутрь svg
// по итогу оно ...
0
голосов
1
ответ
51
показ
Firefox обрезает SVG
Имеется фрагмент SVG, который в Chrome отображается правильно, но в Firefox(v 111.0.1) обрезается.
Обрезка SVG начинается примерно со значения 17900000 по оси Y.
<svg
version="1.1"
...
1
голос
1
ответ
49
показов
как сделать фигуры с закругленными углами с помощью clip и svg?
Все никак не могу сделать фигуры
1
голос
1
ответ
85
показов
Как передать svg в компонент?
Как передать svg в компонент? Нужно создать компонент в который я буду импортировать разные svg иконки. В компонент будет передаваться иконка и название.
Пример:
const ContextButton = ({icon, name}) =&...
2
голоса
2
ответа
58
показов
Как объеденить эти svg?
Отличаются они ВРОДЕ только цветом, но я не понимаю как их можно сделать более уникальными, и обойтись одним SVG которой я могу просто подставлять цвет.
Еще хотел узнать, почему размер "иконки&...
0
голосов
1
ответ
26
показов
JavaScript При клике по кнопке "Проверить" ожидаю проверку примера, на фигуре. Но вместо одной проверки выполняются проверки по всей фигуре
Небольшое математическое приложение. При клике на кнопку "Продолжим?" появляется пример. Ввожу в инпут ответ. Первый пример отрабатывает штатно, но остальные два сначала проверяют истинность ...
2
голоса
1
ответ
36
показов
Не работают stroke-dasharray, stroke-dashoffset
Все привет! Столкнулся с проблемой работы с svg path, ранее использовал для прорисовки линий stroke-dasharray, stroke-dashoffset - и все работало, но здесь что-то пошло не так и эти свойства не ...
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-...
0
голосов
0
ответов
12
показов
Как связать SVG и Google Таблицы
Есть SVG файл, такие делаются в SolidWorks Composer, также из SW можно выгрузить спецификацию в EXCEL или Google Таблицы, вопрос как отметкой флажка в, например гугл таблицах автоматом закрасить ...
0
голосов
0
ответов
32
показа
Необходимо чтобы при ударе кирки, появлялись svg-трещины
Я новичок, и я создаю анимацию, используя svg, в которой кирка ударяет по блоку, и после этого должны появляться трещины, начиная с точки, в которую попала сама кирка, в случайном направлении вниз. Я ...
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/...
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;">&...
0
голосов
0
ответов
53
показа
СSS маскирование через svg маску
Подскажите, пожалуйста, что не так делаю с svg маской что оно не дает результат такой как на картинке ?
body {
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.hero_item {
position: ...
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" ...
2
голоса
1
ответ
65
показов
Не отображается SVG из спрайта
Не отображаются иконки из спрайта через вставку use. Если вставлять через обычный img, картинка есть. Опечаток в названии иконки нет.
<header class="header">
<svg width="24&...
1
голос
1
ответ
46
показов
Смена SVG картинок
Hеобходимо, чтобы при нажатии на кнопку менялись SVG картинки (стрелка с зеленым фоном на белый).
У меня получилось только так: белая появляется при нажатии, хотя должна сменить зеленую.
document....
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)...
0
голосов
0
ответов
55
показов
Figma Как импортировать иконки из фигмы в формат шрифта
На фигме есть бесплатные иконки Iconex Freebie
https://www.figma.com/file/y7LTtSgng4qVYibzYvUWJ4/Iconex---Freebie-icons-(Community)
Поскольку использовать иконки в формате svg/png при верстке не ...
2
голоса
1
ответ
53
показа
Как реализовать анимацию появления кривых линий?
При загрузке страницы , должны появляться линии по направлению точки(левые направо , правые налево), в конце анимации ,на каждой появляется точка.
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:...
0
голосов
2
ответа
27
показов
Как сделать анимация svg?
Как анимировать svg так чтобы поэтапно вырисовывался слева на право? А не сразу все углы
svg {
stroke: violet;
stroke-width: 2px;
stroke-dasharray: 149;
animation: path 3s linear ...
0
голосов
1
ответ
114
показов
Импорт статических файлов react
Есть проект на ts, создал используя cra. Использую для стилей библиотеку vanilla-extract и по инструкции добавил craco с использованием @vanilla-extract/webpack-plugin.
Встала задача импортировать ...
0
голосов
1
ответ
33
показа
Динамичная ширина относительно текста
Есть подобное решение
svg {
color: #fff;
fill: #fff;
width: 25%;
position: absolute;
left: 10px;
top: 20px;
opacity: 1 !important;
pointer-events: all !important;
...
0
голосов
0
ответов
12
показов
Не полное отображение SVG в singleChildScrollView
мне нужно разместить большой svg файл на странице флаттер приложения так что бы оно скролилось как обычная свёрстанная страница, я создал простую структуру кода которая в принцыпе работает как мне ...
0
голосов
2
ответа
41
показ
Не могу поменять цвет svg
пытаюсь изменить цвет изображения в css при помощи:
.primary svg {
fill: white;
}
.ghost:hover svg {
fill: #FFFFFF;
}
само svg изображение я задал следующим образом:
<img src="/icon-...
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}
...
0
голосов
0
ответов
17
показов
Иконка svg в pwa приложении
"icons": [{"src": "/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"}]
Не понимаю, в яндекс браузере(...
1
голос
1
ответ
122
показа
Кривые линии на HTML/CSS/SVG
Как это можно реализовать ? Пробовал вставить svg-код линии в html, но получается, что линия занимает площадь прямоугольника.
1
голос
2
ответа
588
показов
Как размещать svg в html
я новичок изучаю веб своими силами и у меня вылезло несколько вопросов по поводу использования svg на странице html.
1. Как правильно вставлять svg в html?
Знаю несколько способов а какой будет ...
0
голосов
3
ответа
82
показа
Анимация SVG при наведение на родительский блок
У меня есть карточка у нее есть стрелка
<svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"&...
0
голосов
1
ответ
28
показов
SVG анимацию прелоадера без css
Как сделать бесконечную SVG анимацию без CSS и JS с данными условиями?
Есть полоса в виде прямоугольника.
Полоску полностью заполняет градиент из цветов (неважно 2 цвета или 12).
Этот градиент из ...
0
голосов
0
ответов
22
показа
вставка svg-иконок с текстом под ними
Как в один блок вставить 9 иконок, чтобы 5 было на одной строке, а 4 на другой?
0
голосов
0
ответов
15
показов
Перенос блоков svg на новую строку [дубликат]
Есть svg, которая по сути является небольшой табличкой и я столкнулся с проблемой, что примерно после ширины экрана 1000px, блоки перестают переноситься на новую строку и просто становятся ...
0
голосов
1
ответ
57
показов
Вставка больших svg файлов в html
Проблема в следующем имеется карта map.svg(1,5Мб). При Ховере на отдельные регионы они подсвечиваются или при других действиях.Сделал так: минимизировал файл, вставил svg код прямо в страницу, дал ...
0
голосов
1
ответ
38
показов
Как сделать так, чтобы при наведении на весь svg(даже на дырки в картинке) открывалась ссылка?
Сделал ссылку в svg, работает нормально, но хочу чтобы даже при наведении на дырки этой svg на ссылку можно было всё ещё кликнуть. Подскажите пожалуйста, как это можно сделать?
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....
2
голоса
2
ответа
74
показа
Как верно подбирать viewBox, размеры
Задача в том, чтобы исходное svg весило как можно меньше.
Предположим, берем готовую иконку svg, меняем ее размеры либо в большую сторону, либо в меньшу.
Вопрос в том, влияет ли размер холста, размер ...
-1
голос
2
ответа
61
показ
Нужно вставить изображения в черную область, возможно как-то через overflow-hidden
Нужно вставить изображения в черную область, возможно как-то через overflow-hidden,тогда как сделать такую форму для div
?Нужно сделать на CSS.Хелпните, плиз
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....
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....
1
голос
0
ответов
38
показов
Как сделать эффект стирания svg анимация в css
Не получается сделать так, что бы рисовался черный треугольник, потом стирался (от начала к концу) и рисовался градиентный и так же сам стирался (от начала к концу). А так же зациклить все это.
...