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

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

Фильтрация
Сортировка
Метки
6 голосов
2 ответа
1k показов

Построение кривых Безье SVG

В SVG есть встроенная функция построения кривых Безье 2-ой и 3-ей степени, т.е. только по трем и четырем точкам. Нужно строить по произвольному кол-ву точек. Можно было бы строить кривую произвольной ...
user avatar
2 голоса
1 ответ
1k показов

Использовать svg из разметки в качестве фона

Как использовать #bg в качестве фона section? https://jsfiddle.net/42nn4b49/2/ div { width: 4em; } section { outline: 1px dotted red; width: 8em; height: 8em; background: url(#...
Qwertiy's user avatar
  • 124k
2 голоса
0 ответов
41 показ

Странное поведение background (вероятно на ретина-экранах) [дубликат]

Собственно столкнулся с проблемой на сайте - появлением тонких горизонтальных полос на планшете/телефоне (вероятно на ретина-экранах). Подскажите, как от этого проще всего избавиться? Чтобы пример ...
enhaster's user avatar
  • 129
3 голоса
2 ответа
324 показа

Кастомные блоки на сайте

Как сделать что-то вроде такого? Ну или в форме трапеции или в форме сферы ну или в любой другой форме. Есть ли способ проверить наведение :hover ровно по краям, а не прямоугольником. Пробовал ...
IC_'s user avatar
  • 1,936
8 голосов
2 ответа
236 показов

Отображение векторного изображения

Гуглил, но все же не смог найти конкретной информации касательно отображения векторного изображения, в частности .svg формата на мониторе. Судя по тому, что говорит википедия: при выводе на ...
bronstein87's user avatar
  • 1,133
2 голоса
1 ответ
114 показов

Плавное присвоение атрибута

Использую плагин LazyLinePainter для рисования контуров SVG. Но проблема в том, что плагин рисует только линии, но не делает заливку по окончанию процесса рисования. По сему, я решил допилить заливку ...
JamesJGoodwin's user avatar
1 голос
1 ответ
277 показов

Конвертер .svg в <svg>

А существует ли конвертер из формата .svg в код? <svg> <path/> </svg>
JamesJGoodwin's user avatar
3 голоса
3 ответа
5k показов

svg не отображается в браузере Chrome

Хочу на сайте добавить svg, для этого написал <img src="images/use_maximum.svg" alt="" class="img-responsive"/> Проблема в том, что в Firefox и IE данная конструкция работает, а в Chrome нет. ...
ChromeChrome's user avatar
  • 1,526
3 голоса
1 ответ
178 показов

Android Java SVG залить по тапу форму цветом под пальцем

Возникла не сложная, но непонятная для меня проблема. Возможно, данный вопрос уже подымался, что было бы очевидно, но ответа я не нашел. Есть векторное изображение (SVG), которое мы конвертируем в ...
Сергей Нейкович's user avatar
4 голоса
2 ответа
384 показа

Как делать SVG резиновым?

Как делать SVG структуру резиновой ?К примеру на такое конструкции * { margin: 0; } svg { display: table; margin: auto; } <svg style="width:1200px; height:300px;"> <...
user avatar
5 голосов
2 ответа
324 показа

Как в SVG вычислить path исключения?

У меня есть две окружности. Они соответственно задаются тремя path элементами. Первая окружность, вторая и их пересечение. Можно ли с этой информацией с помощью JS построить path вычитания окружностей?...
Alexey Prokopenko's user avatar
2 голоса
1 ответ
149 показов

Как в SVG c помощью JS сделать заштрихованный фон

Есть SVG изображение, сгенерированное с помощью D3.js. Нужно некоторые части пометить. Я могу поменять цвет, прозрачность и даже задать градиент. Как сделать элемент заштрихованным, что бы не менять ...
Alexey Prokopenko's user avatar
4 голоса
1 ответ
106 показов

Проблема с svg и плагином fullpage

Вопрос в следующем: Есть изображения комнаты. Я его разместил в блок. Блок должен растягиваться на всю ширину и высоту по экрану. Мне нужно на этом изображения разместить svg выделения стола, стула ...
Владимир Юрчук's user avatar
3 голоса
1 ответ
1k показов

Как сделать анимацию SVG Path'ов через Jquery

Нужно сделать 4 отдельных элемента (!важно, чтобы при наведении на каждый анимация была именно для него). Сделать так, чтобы не зависело от размера экрана, чтобы виджет можно было делать любого ...
IC_'s user avatar
  • 1,936
3 голоса
1 ответ
189 показов

Анимация ломаной линии на сайте

Как сделать эффект линии, которая при загрузке сайта плавно сверху идёт к центру, там подобным образом изгибается и спускается дальше? Мне подсказали, что можно использовать SVG, а как именно?
Александр's user avatar
4 голоса
1 ответ
444 показа

SVG: Динамическая погрузка / создание / добавление на страницу

С помощью JS генерируется svg элемент и добавляется в HTML, но он не отображается. Есть в коде, но не рендерится. Если скопировать из дебаггера код и добавить в html вручную то все нормально. В чем ...
Renat Berezovsky's user avatar
15 голосов
3 ответа
2k показов

Плавная смена (Анимация) Svg Path D координат

Здравствуйте! Есть svg path с координатами: M 8,21 L 12,21 L 17,26 L 17,10 L 12,15 L 8,15 L 8,21 z M 19,14 L 19,22 C 20.48,21.32 21.5,19.77 21.5,18 C 21.5,16.26 20.48,14.74 19,14 z M 19,11.29 C 21....
Yuri's user avatar
  • 16k
1 голос
0 ответов
43 показа

(rails) SVG: saturate принимает только интервал 0..1

На вьюхе svg saturate прекрасно работает. Верчу бегунок в пределах 0..5 - картинка меняется (Код вьюхи думаю не нужно приводить). Отправляю данные на сервер - при сохранении saturate='0.5' или '0.9' ...
SerjEast's user avatar
1 голос
1 ответ
89 показов

SVG in iOS, wrong parsing

Сегодня дизайнер прислал мне архив с svg, я добавил их в приложение и получил следующую картину (например, потому что подобное повторяется со всеми свг) при том, что саму svg всё, в том числе и xcode ...
Александр Тарабрин's user avatar
2 голоса
0 ответов
169 показов

Размещение Яндекс карты в непрямоугольном блок

Необходимо поместить Яндекс карту в непрямоугольный блок (например, в форме стрелки). Подскажите, пожалуйста, может, есть возможность через svg (у меня знания svg поверхностные) или как-то иначе. Знаю,...
mihail's user avatar
  • 23
2 голоса
1 ответ
65 показов

(rails) После сохранения svg изображение сжимается (геометрические параметры)

def svg_save svg_string = " <svg class='filterPlace' height='#{self.image_height}' width='#{self.image_width}'> <defs> <filter id='fp1'> &...
SerjEast's user avatar
1 голос
2 ответа
176 показов

Не рендерится картинка Svg image при загрузке страницы

При загрузке страницы не видна картинка (image = document.createElementNS("http://www.w3.org/2000/svg", 'image');) Но Если в инспекторе объектов, в Google Devs, скопировать html код картинки и ...
Den Rash's user avatar
24 голоса
2 ответа
480 показов

SVG как сделать обратное проигрывание анимации?

По клику нужно чтобы анимация останавилась на паузу,а потом по ещё одному клику воспроизвелась с тогоже места но в обратном направлении,как сделать? var play = document.querySelector(".play"), ...
SunCode's user avatar
  • 281
1 голос
2 ответа
123 показа

Как сделать увеличение блока c svg?

Но так что бы сам svg не увеличивался : svg{ display:block; margin:auto; } #img1{ } image{ width:400px; height:200px; } image:hover{ transform:scale(1.2); cursor:...
user avatar
2 голоса
1 ответ
885 показов

Динамическое изменение цвета объектов в SVG

Есть вот такая картинка. Подскажите можно ли такую же сдать при помощи SVG и сделать так что бы круги плавно меняли цвет? Вот что у меня получилось <svg width="120" height="120" viewBox="0 0 ...
MasterSergey's user avatar
0 голосов
1 ответ
249 показов

Не отображаются svg иконки в android

Пишу мобильное приложение на Qt 5.7, в нём имеются svg иконки. Во время запуска приложения на компьютере все отображается корректно, но запуская на смартфоне svg иконки не отображаются хотя остальные ...
Amir Afendin's user avatar
2 голоса
2 ответа
2k показов

Как вырезать svg из макета?

Как правильно вырезать svg из psd макета? Через Export as... можно выбрать формат сохранение svg, а на деле сохраняет картинку которая портится при масштабировании. Читал что можно через File > ...
alexx's user avatar
  • 39
1 голос
1 ответ
120 показов

Как сделать респонсив-svg по одной из осей?

Собственно, если svg задать viewBox, то он масштабируется, подгоняя свой размер под контейнер. Но я хочу, чтобы он только по горизонтальной оси масштабировался, а по вертикальной изменял высоту без ...
Qwertiy's user avatar
  • 124k
0 голосов
1 ответ
335 показов

HTML5 SVG D3.js Часы

Здравствуйте. Пример часов Simple D3 clock, модифицирую под себя. Надо чтобы цифры были повёрнуты параллельно соответствующим им рискам часов и минут. Как это сделать? Смотрел разные примеры и ...
Илья's user avatar
2 голоса
0 ответов
79 показов

Выборочная минификация SVG спрайта

Не так давно работаю с SVG спрайтами и в целом все устраивало. Запускался task в gulp, создавался svg спрайт и scss файл с величинами иконок. Все это добавлялось в разметку и величины цвета и размеры ...
G. Andrey's user avatar
3 голоса
3 ответа
3k показов

Изменить позицию фигуры в SVG

Как перемещать фигуры? x и y работает только в circle (или может других), а мне нужно либо в polygon, либо в path. Там x и y не работают. Именно переместить на странице, у меня фигуры всегда в верхнем ...
francoder's user avatar
1 голос
0 ответов
128 показов

SVG в chrome и safari разных размеров

Вывожу SVG на экран с помощью D3js В хроме все ок (картинка 1), а в сафари появляются непонятные отступы (картинка 2) index.html <html> <head> <meta http-equiv="...
Maksim's user avatar
  • 29
0 голосов
1 ответ
30 показов

Библиотека графов где можно выводить тексты на столбцах.

Какая есть javascript библиотека отрисовки графиков, которая бы позволила в точности повторить такой макет? То есть выводить буквы поверх столбцов, группировать столбцы. Через css двигать любые ...
manking's user avatar
  • 6,391
1 голос
0 ответов
203 показа

Проблемы с SVG на внутренних страницах сайта

Здравствуйте. Дано: - svg-спрайт <svg style="display: none;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs&...
rebroff's user avatar
  • 453
1 голос
1 ответ
185 показов

Непонятная ошибка при разборе(parse) VectorDrawable Android

Решил использовать в своем проекте svg-файлы. Выбор мой пал на эту библиотеку SVG-изображения преобразовываю в xml-ресурс при помощи плагина к AndroidStudio - SVG2VectorDrawable. На выходе получается ...
Djangorussia's user avatar
3 голоса
1 ответ
445 показов

Преобразование координат svg объекта, созданного в Inkscape для web-страницы

Есть несколько кнопок, нарисованных в Inkscape. Нарисованы они друг под другом. При сохранении в svg образуются path с координатами Inkscape. Для работы с svg использую Snapsvg. Загружая файл и ...
sepgg's user avatar
  • 2,566
6 голосов
1 ответ
168 показов

Рисует ли браузер то, что находится за областью видимости SVG холста?

Обращаюсь к тем кто уже сталкивался. Вопрос такой: Есть ли смысл кластеризовывать svg на квадратные области (сетку) с ссылками на объекты в них для фильтрации и последующего показа только элементов ...
Aleksander K.'s user avatar
2 голоса
1 ответ
203 показа

Почему не работает код в IE и Firefox? [закрыт]

Почему не работает код в IE и Firefox? http://codepen.io/anon/pen/JKEvzZ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-...
Михаил Диско's user avatar
3 голоса
2 ответа
413 показов

Пятиугольная кнопка

Здравствуйте. Весь день бьюсь над этой кнопкой. Пробовал делать уголок с помощью border - не работает градиент. Пробовал поворачивать див на 45 градусов - угол стрелки получается 90 градусов, а на ...
kvazarich's user avatar
10 голосов
1 ответ
337 показов

Как правильно пользоваться SVG?

К примеру надо сделать кнопки : Наверно на svg это будет лучше , или : <svg width="260" height="140"> <polyline points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, ...
user avatar
1 голос
1 ответ
560 показов

Не масштабируется svg-элемент, созданный Ангуляром

Как известно, svg-элемент с заданным viewbox и размерами должен астоматически масштабироваться к размерам, прописанным в стилях. Например, возьмём круг в области 200*200 и поместим его в div размером ...
Qwertiy's user avatar
  • 124k
4 голоса
3 ответа
1k показов

Выстроить элементы внутри svg последовательно

Как последовательно выстроить группы внутри одного svg-элемента? Надо чтобы элементы g первого svg сами встали приблизительно как svg-теги во втором divе. https://jsfiddle.net/kj1tmre3/1/ <...
Qwertiy's user avatar
  • 124k
0 голосов
0 ответов
52 показа

Как заставить появляться абсолютный блок при наведении на circle в svg?

Как заставить блок появляться на одной высоте и с левой стороны? Проблема в том что circle в svg спозиционированны через cx и transform. И значения через .position() и .offset() делает расчет от ...
Drop's user avatar
  • 577
1 голос
1 ответ
218 показов

Как подобраться к элементам SVG через JS?

Всем доброго дня. При верстке сайта столкнулся с проблемой в работе с SVG. Есть SVG-шка подобной структуры: <svg id="district"> <path id="black1"></path> <path id="...
andRu's user avatar
  • 85
2 голоса
0 ответов
111 показов

Какую технику использовать при анимации графики (изображений) при прокрутке?

Есть страница. При прокрутке происходит смена одного блока другим. Необходимо сделать так, чтобы некоторые картинки анимировались. Есть много таких сайтов, вы наверняка их видели, но я, к сожалению, ...
smellyshovel's user avatar
  • 5,224
1 голос
0 ответов
42 показа

Очередной вопрос верстки Dots для слайдера

Не получается сверстать дотсы для слайдера. Использую Slick. Если есть какие-то туториалы создания таких дотсов поделитесь плз. Думаю такое возможно только с использованием SVG. Так как редко ...
pwnz22's user avatar
  • 401
7 голосов
4 ответа
3k показов

Как анимировать пунктирную линию (SVG)

Есть готовый файл, сохраненный в SVG. Задача следующая, при наведение сделать его анимированным. Суть анимации: рисования элемента от начала до конца. Я полазил по интернету и нашел подходящий пример ...
Node_pro's user avatar
  • 8,059
1 голос
1 ответ
5k показов

Работа с SVG через object

Ребят, такая ситуация, вставляю svg через object, но стили не задаются (имею ввиду заливку - fill), вот код html: <object data="img/Icon/interface.svg" type="image/svg+xml" class="icon"></...
SvArt713's user avatar
  • 571
2 голоса
1 ответ
2k показов

Смена цвета у svg иконки при наведении

Как сделать, чтобы при наведении черно-белая svg-иконка, становилась цветной? Если есть скрипт, могли бы вы рассказать, что к чему там?
SvArt713's user avatar
  • 571
0 голосов
0 ответов
629 показов

Не работает svg спрайт

Используется шаблонизатор Smarty, в index.tpl подключается файл svg.tpl. При мер из него: <svg xmlns="http://www.w3.org/2000/svg" > <symbol id="chevron-left" viewBox="0 0 24 24" > &...
Сергей Мирошник's user avatar