Поиск по сайту

Результаты поиска по тегам 'svg'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Коммерческие услуги

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу



Фильтр по количеству...

Найдено 40 результатов

  1. Как скачать canvas как .svg ?

    Всем привет! Столкнулся с такой проблемой: как скачать элемент canvas в формате изображения .svg? Заранее спасибо!
  2. Доброго времени суток. Возникло пару вопросов: - Пытаюсь конвертировать png в svg через вот этот сервис https://convertio.co/ru/png-svg/ . Картинка цветная, на выходе она получается черно-белая... так и должно быть? - А как данную картинку потом вставить, если правильно, что она получается черно-белой... (хотя в принципе как правильно поставить svg) Вроде смотрела примеры, но что-то не поняла.. *первый раз пробую поставить svg Спасибо ^^
  3. Всем привет! Первый раз сталкиваюсь с таким отображением в разных браузерах. Применяется bootstrap4 Далее на картинке: 1. В хроме все норм. Единственное, как сделать, чтобы линия прогресса в блке "our process" анимировалсь только один раз после перезагрузки страницу? 2. Лого в firefox и edge отображаются одинаково. Буквы D (маска) не видно. В IE11 видно верхушку. 3. Блок "our process" в edge не анимируется progress в виде контура красным цветом, а в IE11 вообще бардак. Анимируется только появление текста. 4. На iphone5 не анимируются hexы в блоке "WHAT CAN YOU RECEIVE" Проверял на виртуальной машине. На маке не тестил, нет возможности. В лого я думаю проще будет сделать все в png. А вот c остальным помогите? https://schamil74.github.io/Daisy/
  4. Mask in SVG

    Всем привет! И опять у меня проблемы с SVG. Как сделать, чтобы у буквы D был такой же фон как у контейнера? Т.е. D прозрачная, и фон у многоугольника на месте буквы тоже. Мучаюсь здесь
  5. Как это сверстать?

    Всем привет! Как сверстать такую секцию(см. изображение)? Сверстать нужно так, чтобы при скроллинге (используя, например waypoints) постепенно грани заливались красным цветом от step1 до step4 (анимация). Появилась одна идея, создать многоугольник из линий в svg. Другой идеи в голову не пришло. Но такое искусство не масштабируется при адаптации. Как анимировать пока даже и не думал. Это учебный макет и экспериментальный макет.
  6. Всем привет! Наткнулся на такой макет https://mega.nz/#!5XYwxYrK!CKPEpk5YklPP-_QThH67BoTQLVQfDvzt1cmVoO9hFRo На картинке проблемные элементы выделены синими стрелками: - листы с загнутыми уголками и тенями (Блоки с заголовками Documents и Photos) - иконки планшетов с тенями - линия разрыва (если так понятно о чем я) - иконки ноутбука с тенями Можно сверстать так: загнутые листы и иконки блоков docs и photos наверное можно в одну png сохранить. можно разбить на два файла. Планшеты(ноут) и тени сделать отдельными картинками. Т.е. тень будет фоном у компа и ноутов. Планшеты и ноут в SVG. Но больше всего интересна полоса разрыва))))Как? Просто взять и наложить фоном в виде картинки? А как бы вы сверстали эти элементы? Какое решение будет оптимальным?
  7. SVG-sprite in IE11

    Всем привет! Столкнулся проблемой отображения svg спрайтов в ie11. Описываю проделанные мною два варианта: В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Работает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg. Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял, но это и не нужно), но реагирует на css, причем не отображаются только некоторые иконки. Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например (синтаксис pug: svg.contacts__flag(width="60", height="90") use(xlink:href="#flag") Ниже сама верстка со спрайтом только 2го варианта https://schamil74.github.io/Mishka Таск для спрайтов gulp.task('symbols', function () { return gulp.src("source/img/icons/*.svg") .pipe(svgmin()) .pipe(cheerio({ run: function ($) { $('[fill]').removeAttr('fill'); $('[stroke]').removeAttr('stroke'); $('[style]').removeAttr('style'); }, parserOptions: {xmlMode: true} })) .pipe(replace('>', '>')) .pipe(svgstore({ inlineSvg: true })) .pipe(rename("symbols.pug")) .pipe(gulp.dest("templates/blocks/")); }); Скрин того, что видит chrome и firefox (слева), и ie11 (справа). Повторюсь, что не все иконки не отображаются Пробовал подключать svgxuse и svg4everybody, но толку нет. Какую еще предоставить инфу? PS: Я все еще новичок.
  8. SVG-sprite in IE11

    Всем привет! Столкнулся проблемой отображения svg спрайтов в ie11. Есть два варианта: В 1ом варианте svg экспортировал через плагин generate в photoshop 2015. Hаботает во всех браузерах, но не реагирует на css, даже если почистить все атрибуты у svg. Во 2ом сложнее сохранял как .ai и конвертировал в svg. Не работает только в ie11 (версии ниже не проверял), но реагирует на css, причем не отображаются только некоторые иконки. Спрайт прикрепляю сразу после открывающего тэга body и скрываю его. Обращаюсь к спрайту через, например: svg.contacts__flag(width="60", height="90") use(xlink:href="#flag")
  9. Мы – студия «Элемент». Ищем верстальщика для постоянного сотрудничества, который не боится, умеет и любит верстать проекты сложнее среднего. Работа проектная, но проекты идут часто (каждый месяц 1-2, иногда даже 3 проекта). Кратко о нас: Располагаемся в Рязани. Работаем с 2008 года. У нас в команде 10 человек. Предпочитаем технологически сложные проекты. Обязательно: - знание HTML5 / CSS3 с учетом кросс-браузерности; - умение подбирать сторонние компоненты и стилизовать их (календари, слайдеры и т.п.); - умение работать с адаптивными стилями; - менеджер пакетов bower или jspm; - знание основ CSS-анимации; - знание основ SVG; - понимание основ работы git; - желание развиваться; - быть на связи, чтобы не приходилось разыскивать; - здравый перфекционизм в работе в части соответствия верстки макету и в части качества кода; - умение принимать решения в мелочах (чтобы часто не дергать менеджеров и/или дизайнеров) Приветствуется: - умение работать в комнде; - компонетный подход к разработке (например, БЭМ); - знание основ JS в объеме, который помогает верстке; - навыки работы с GitHub и/или GitLab - понимание принципов семантического версионирования - навыки работы с Bootstrap; - навыки работы с FlexBox; - навыки работы с Grid Layout; - навыки работы с WebStorm; - пост-обработчики: PostCSS, LESS, SASS; - возможность работы в часовом поясе, близком к Москве; - умение сверстать новый / подверстать готовый код, когда он уже включен в шаблонизатор движка (smarty). Там никаких Америк нет, просто требуется аккуратность; - наличие ИП. Что нам важно видеть в отзыве на наше предложение: - примеры 3-4 свежих работ онлайн (посмотрим, какие используются методики); - опыт верстки в годах; - краткое описание умений по списку наших требований (буквально по одной строке на пункт); - ожидаемая ставка часа в рублях; - метод перечисления оплаты; - в каких сферах вы бы хотели развиваться в ближайшие 1-2 года. Если написать отзыв в таком виде, то мы сэкономим друг другу время. А это приветствуется. — Вопросы/ответы можно писать сюда или мне в личку. От себя замечу, что целевые браузеры это: последние версии Chrome(ium), FireFox, Safari, IE11/Edge. Целевые платформы: десктоп + мобильные устройства. Не pixel pirfect, но и чтобы выглядело достойно =) Если вы не знакомы с парой пунктов из обязательно списка, но у вас присутствуют адекватность и здравый смысл, то мы можем пообщаться и выяснить детали) Мы понимаем, что "знать все" не возможно. Вместе с тем, мы постарались перечислить то, с чем вам, вероятно, придется иметь дело. На js-фронтэнде у нас Angular 1.x, Vue, jQuery. Для сборки применяется Webpack. Для запуска задач Gulp. Взаимодействовать придется в том числе со мной , будет шанс научится чему-либо из js, если не знаете, но хотите развиваться в этом направлении. В недалекой перспективе на бекэнде Node.js. Если хотите развиваться в эту сторону, такая возможность тоже имеется. Вы можете писать код в чем угодно (IDE, редакторы), но ваши инструменты должны уметь деплоить на удаленный сервер (требуется для ряда проектов).
  10. Добрый день, Как считаете как лучше реализовать эту рамку? Как бы сделали это вы? border || border-image || svg || css-mask Или что-то другое??? Спасибо!
  11. Есть макет с эффектом рамки на заднем фоне. Как считаете как лучше реализовать этот эффект? Как бы сделали это вы? border || border-image || svg || css-mask Или что-то другое??? Спасибо! Кому интересно - ССЫЛКА на весь макет!
  12. Нужна помощь! Начал разбираться со свойством 'clip-path'. Оно пока мало поддерживается браузерами. Полноценно только -webkit-браузерами. Поддержка Firefox имеется, но только через "external-link" - clip-path: url(#foo) и описании svg в html. У меня возникла проблема реализации именно последним способом: Вот реализация через clip-path в css (работает только на -webkit-): Захотел сделать тоже самое только через external-link для поддержки Firefox, описал те же polygon в svg и меня ничего не работает, в чем именно я допустил ошибку? Знаю, что будут проблемы с transition со второй реализацией, но это лучше чем ничего! Заранее спасибо за помощь!
  13. Ищу работу удаленно

    Здравствуйте. Меня зовут Вавилкин Максим. Я ищу удаленную работу. Я уверенно знаю: Html и css. Знаю технику адаптивной верстки. При верстке придерживаюсь методологии БЭМ и в некоторых случаях использую Bootstrap. Также есть базовые знания Js и php. К работе отношусь очень ответственно, и всегда завершаю дела до конца. К письму прикладываю ссылку на свой сайт резюме. https://maxvilson.github.io/portfolio/build/
  14. Svg картинки

    Привет форум. Хотел спросить как добавляются или создаются картинки в формате svg. Они рисуются на отдельном редакторе а после компилированный код добавляется в html файл? Можно ли из растровой картинки сделать svg? и если можно какие нибудь уроки подробные Спасибо.
  15. Здравствуйте. Необходимо реализовать 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 обрабатывать ссылки нормально? Заранее спасибо.
  16. Анимация circle chart

    Здравствуйте. Как осуществить такую анимацию - https://dribbble.com/shots/1296229-Animation-Rectify-Stats От нее нужен сам круг и цифры в центре, ну и эффект тоже. На SVG? Вдруг у кого-то есть пример, поделитесь, пожалуйста.
  17. Здравствуйте. Помогите дописать внешний вид для circle bar. Нужно следующее - http://joxi.ru/E2pkNJdSBNZkWm Пока нашла 2 неплохих плагина, progressbar.js (SVG) и radialIndicator.js (Canvas). Как дописать тот красный кружок?
  18. помогите пожалуйста скопировать лого. желательно чтобы в результате оно было на прозрачном фоне: http://joxi.net/Y2L8Z8nSnNPJ52 https://news.rambler.ru/world/33965170/ тут мне даже не понятно где параметры svg-изображения хранятся >__<
  19. баг высоты svg

    Доброго времени суток экспертам и профи) Проблема такая.. Имеем на странице svg размерами 1000х1138 <img src="images/logo.svg" alt=""> для img задана img { max-width: 100%; } Находится img в нужном блоке и сжался до 92 пикселей в ширину.. с ней проблем нет, а вот высота просто огромная. В основных браузерах всё ок. Проблема в сафари. Точнее неправильное вычисление высоты. Читал на стак-оверфлоу и гугле, что это баг браузера.. Вопрос в следующем - есть ли оптимальный способ устранения данного бага ?
  20. анимация SVG

    Здравствуйте! Пытаюсь создать анимацию на сайте с использованием SVG изображения экспортированного с Corel Draw. Я в интернете нашел пример https://css-tricks.com/svg-line-animation-works/ где идет обрисовка изображения при помощи animation в css но когда я заменяю коде изображения в теги path - вставляю код экспортированного с Corel - а изображения в формате SVG то эта анимация не работает. Подскажите как с Corel Draw изображения SVG сделать анимацию в HTML
  21. Адаптивная верстка IE10+ Для себя сделал вывод, меню лучше делать два: одно полноразмерное, другое для мобильных устройств. Правда, в ie8 не отображается ровным счетом ничего(пустая страница), что для меня пока загадка. Может кто знает ответ?
  22. Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
  23. Всем привет. Ребята столкнулся с проблемой по SVG, файлы попросту не отображаются, при этом консоль не ругается, адреса в коде актуальные но само отображение не происходит. [hide]bogus.hohmochka.in.ua[/hide] кто то может подсказать, в чем может быть трабл? куда копать то? ЗЫ: хайд какой-то странный =)
  24. SVG

    Решил использовать графику svg и все хорошо работает. Но вот ситуация если браузер свернуть в окно (то есть сделать размер меньше) svg естественно примет нужный размер, но если потом развернуть браузер svg останется с последним размером и это выглядеть ужасно. Может при экспорте в svg есть какие то настройки нужно проставлять. Или как то вставлять по особому.
  25. Приветствую всех! Eсть проблема. Когда задаешь svg свойство transform="rotate, scale, .....", это свойство создаёт новую действующую систему координат SVG-элемента. Расскажите, как вы с этим боретесь и боретесь ли вообще. Для иллюстрации . В примере когда применяется hover, кружок улетает, как сделать так что бы он остался на месте и просто повернулся на 45deg