Search the Community
Showing results for tags 'svg'.
-
Здравствуйте. Меня зовут Вавилкин Максим. Я ищу удаленную работу. Я уверенно знаю: Html и css. Знаю технику адаптивной верстки. При верстке придерживаюсь методологии БЭМ и в некоторых случаях использую Bootstrap. Также есть базовые знания Js и php. К работе отношусь очень ответственно, и всегда завершаю дела до конца. К письму прикладываю ссылку на свой сайт резюме. https://maxvilson.github.io/portfolio/build/
-
Привет форум. Хотел спросить как добавляются или создаются картинки в формате svg. Они рисуются на отдельном редакторе а после компилированный код добавляется в html файл? Можно ли из растровой картинки сделать svg? и если можно какие нибудь уроки подробные Спасибо.
-
Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats От нее нужен сам круг и цифры в центре, ну и эффект тоже. На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.
-
Здравствуйте. Необходимо реализовать svg-иконки соцсетей. На картинке снизу соответственно обычное состояние, hover и active. . В состоянии active у иконки должна появляться тень. Код иконок я вставляю в HTML, и стилизую с помощью CSS. Сначала я пытался реализовать тень с помощью box-shadow inset, применяя её к самому svg. Но в таком случае тень появляется как-бы за элементом http://codepen.io/Drew96/pen/WxPdvb Потом я пытался сделать тень с помощью svg-фильтров. Но так как иконка представляет собой круг с «дыркой» по форме значка социальной сети, то тень появлялась не только сверху круга, но еще и под значком. Тогда я сделал тень, добавив блочный псевдоэлемент к ссылкам. Уже к этому элементу я добавлял тень и абсолютно позиционировал его относительно родительского элемента иконки. http://codepen.io/Drew96/pen/xOrpkp Получилось нормально, но в firefox этот вариант работает плохо. Ссылка работает только при нажатии где-то внизу иконки или на самой границе. Поэтому и появился вопрос, как правильно реализовать такую тень, или как заставить firefox обрабатывать ссылки нормально? Заранее спасибо.
-
Здравствуйте. Помогите дописать внешний вид для circle bar. Нужно следующее - http://joxi.ru/E2pkNJdSBNZkWm Пока нашла 2 неплохих плагина, progressbar.js (SVG) и radialIndicator.js (Canvas). Как дописать тот красный кружок?
-
помогите пожалуйста скопировать лого. желательно чтобы в результате оно было на прозрачном фоне: http://joxi.net/Y2L8Z8nSnNPJ52 https://news.rambler.ru/world/33965170/ тут мне даже не понятно где параметры svg-изображения хранятся >__<
-
Доброго времени суток экспертам и профи) Проблема такая.. Имеем на странице svg размерами 1000х1138 <img src="images/logo.svg" alt=""> для img задана img { max-width: 100%; } Находится img в нужном блоке и сжался до 92 пикселей в ширину.. с ней проблем нет, а вот высота просто огромная. В основных браузерах всё ок. Проблема в сафари. Точнее неправильное вычисление высоты. Читал на стак-оверфлоу и гугле, что это баг браузера.. Вопрос в следующем - есть ли оптимальный способ устранения данного бага ?
-
Здравствуйте! Пытаюсь создать анимацию на сайте с использованием SVG изображения экспортированного с Corel Draw. Я в интернете нашел пример https://css-tricks.com/svg-line-animation-works/ где идет обрисовка изображения при помощи animation в css но когда я заменяю коде изображения в теги path - вставляю код экспортированного с Corel - а изображения в формате SVG то эта анимация не работает. Подскажите как с Corel Draw изображения SVG сделать анимацию в HTML
-
Адаптивная верстка IE10+ Для себя сделал вывод, меню лучше делать два: одно полноразмерное, другое для мобильных устройств. Правда, в ie8 не отображается ровным счетом ничего(пустая страница), что для меня пока загадка. Может кто знает ответ?
-
Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
-
Всем привет. Ребята столкнулся с проблемой по SVG, файлы попросту не отображаются, при этом консоль не ругается, адреса в коде актуальные но само отображение не происходит. [hide]bogus.hohmochka.in.ua[/hide] кто то может подсказать, в чем может быть трабл? куда копать то? ЗЫ: хайд какой-то странный =)
-
Решил использовать графику svg и все хорошо работает. Но вот ситуация если браузер свернуть в окно (то есть сделать размер меньше) svg естественно примет нужный размер, но если потом развернуть браузер svg останется с последним размером и это выглядеть ужасно. Может при экспорте в svg есть какие то настройки нужно проставлять. Или как то вставлять по особому.
-
Приветствую всех! Eсть проблема. Когда задаешь svg свойство transform="rotate, scale, .....", это свойство создаёт новую действующую систему координат SVG-элемента. Расскажите, как вы с этим боретесь и боретесь ли вообще. Для иллюстрации . В примере когда применяется hover, кружок улетает, как сделать так что бы он остался на месте и просто повернулся на 45deg
-
Столкнулся с довольно простой задачей. Есть картинка с планом здания, там есть комнаты, они не все квадратные, некоторые неправильной формы. Соответственно нужно при наведение на некоторую комнату затенить область. На выбор были Canvas, SVG и Map, я решил использовать SVG. Все оказалось весьма просто, нарисовать через path комнаты, добавить на :hover затенение и отлично, однако возникла проблема. Стало необходимо ресайзить SVG не только с нарисованными областями, но и с картинкой на background. Вот пример http://codepen.io/anon/pen/WvXqOd
-
Все доброго времени суток. Сверстал такую секцию(адаптивную). Но еще осталось реализовать подсвечивание грани многоугольника в центре. Несколько вопросов по этой верстке: -Линии и окружности, таким образом(как я сверстал) вполне нормально верстать(через псеводо элементы и дивы) или все же сделать на svg или может еще, что-то более качественное есть? -Так как грань центрального многоугольника при наведении на пункт секции, должна подсвечивается розовым, думаю сделать поверх многоугольника svg. Но проблема в том что цвет подсвечиваемой грани неоднородный. Я слышал что svg можно с растром считать, та ли эта ситуация?(в svg не очень пока силен). Дополнительно: ссылка на github.
-
Всем привет. Хочу на сайте создать блоки произвольной формы. Скрин ниже. Пробовал через SVG - да, получается, но мне это не подходит. Многовато будет весить страница, если таких фигур будет несколько. Так что этот вариант отпадает. Canvas - тоже не подходит. Ведь там JS, а он не у каждого пользователя включен (в браузере). Этот вариант тоже отпадает.CSS - я не знаю, как с помощью CSS нарисовать такой блок. Нашёл лишь свойства, которые могут помочь: [сode]z-index, border-radius, border-width, transform, transform-origin, display, :after, :before, position. Но как - я не знаю. Пробовал просто "налепливать" фигуру на фигуру, чтобы получить нужную, но не получилось. Нет, получилось, но не так, как нужно. У многих "налепленных" фигур был фиксированный размер, а мне нужен резиновый. То есть в процентах. Помогите, пожалуйста.
-
Добрый день, помогите разобраться как растянуть блок svg чтобы было видно всё размытие. Вот пример http://www.saitadmin.ru/faili_na_razdacu/html/svg.html
-
http://codepen.io/anon/pen/Nqadoo В примере обе иконки – это SVG data-uri. Первая иконка ведет себя так, как если бы ей было заданы следующие свойства: background-repeat: no-repeat; background-size: contain; background-position: bottom; Вторая ведет себя так, как и должна, т. е. обрезается, если размер не влезает. Подскажите, в чем здесь дело?
-
Подскажите, как можно победить svg иконки, на сайте http://delovsite.ru/ в IE. Слева, стоят ссылки-иконки на группы. Стоят там svg. Если сразу не будет видно, то можно чуть уменьшить окно IE. Проблема вроде как известная, https://gist.github.com/larrybotha/7881691, но победить не получилось. Может есть еще какие то варианты? Кроме как заменить на png) Причем первая иконка вроде как отображается нормально:
-
Народ, кто работал с SVG? Возможно ли внутри <svg> использовать некий элемент со скроллом? Объясню проблему подробнее. Есть некий viewport, у него фиксированные размеры (заточенные под iPhone 5), т.е. 320px x 568px. Этот вьюпорт масштабируется при помощи viewBox. Ниже код: <svg width="100%" height="100%" viewBox="0 0 320 568"></svg>Делается это для мобильника, чтобы при смене ориентации экрана всё масштабировалось. Поэтому поверх SVG положить <div> c overflow: hidden; не могу.
-
Затеял тут сделать простой редактор схем процессов. И подумал, чтобы линии в месте пересечения полукругом друг друга огибали сделать всё на Svg. И кажется так в дальнейшем будет больше преимуществ. Без svg всё просто стрелочки бы тоже дивами рисовал (там мона и треугольнички дивами к ним приделать... по большому счёту можно и полукруги сделать ..) Вот например, как я таскаю див и текст в него могу вбивать: http://jsfiddle.net/5g55uyjn/1/ А вот с svg начались непонятки. Но совершенно не понял, как тупо текст внутрь rect или внутрь circle поместить. А потом таскать это одним махом... Думал просто можно текст вставить... Нельзя вроде... Думал для этого <g> служит... Помещу туда <rect> и <text>. И буду таскать всё за <g> (см. http://jsfiddle.net/5g55uyjn/4/ ). А вроде нет. Через <g> мона задавать им общие css-свойства... А x и y это их аттрибуты, а не css-свойства и посему задаются вроде им отдельно. Ну сделал так: http://jsfiddle.net/5g55uyjn/3/ - ну так тут текст не таскается (( Могу конечно замутить скрипт перетаскивания, который одновременно будет менять ОТДЕЛЬНО x,y у всех вложенных в <g> элементов ПУТЕМ ИХ БАНАЛЬНОГО ПЕРЕБОРА. Но неужели нет ПРОСТОГО способа задать текст внутрь rect или внутрь circle?
-
Уважаемые форумчане! Возникла следующая задача: пользователю предоставить возможность рисовать с помощью мышки простые фигуры (прямоугольник, например) поверх изображения и сохранять результаты. Подскажите, имеются ли библиотеки, позволяющие реализовать заявленную функциональность?
-
Здравствуйте! Нужна маленькая помощь... может и не маленькая... Как-то на сайте рассматривалась тема "Построение интерактивной карты с Raphaël", http://htmlbook.ru/blog/postroenie-interaktivnoi-karty-s-raphael очень заинтересовал один вопрос... А возможно ли в init.js там где атрибут fill выставить для каждого объекта (страны) изображение, скажем флаг страны? ( я там уже отметился с вопросом, может тут быстрее поможете, очень интересует такая возможность) Помогите, пожалуйста, дайте дельный совет! Заранее благодарен!
-
Привет! Вопрос спецам. Существует ли способ создания блока не прямоугольной, произвольной области с последующим навешиванием на него box-shadow при :hover? Конкретно нужно для того, чтобы при наведении на картинку произвольной формы, например, треугольника, появлялось свечение выстраивающееся по траектории треугольника. (но не обязательно треугольника, фигура может быть разная). Map area и подгрузку двух картинок (одну без свечения, другую с..) не предлагать.
-
Здравствуйте, дали макет и в нем вот такой слайдер — http://img542.images...2/4426/v11v.jpg . Как вы заметили изображения слайдера необычной формы, У меня были идеи: Сохранить их в png с такими "вырезами", но они бы много весили по сравнению с jpg; Сделать блоки, которые бы перекрывали картинку, но фон не однородный: Cделать это с помощью css-свойства mask-image, но оно поддерживается только в Webkitax. Остановился на SVG clip-path. Вот что из этого вышло: http://fiddle.jshell...ody/dHjXn/show/ Не получается отобразить картинки в IE8 и ниже. Может кто-нибудь подскажет как с эти бороться? Можно даже их сделать прямоугольной формы, главное чтобы отображались
