Статьи по теме svg

Публикации по теме 'svg'

Использование React для XML и SVG

React - отличный инструмент не только для HTML, но и для безопасного и эргономичного создания любого документа на основе XML. Фактически, мы использовали немного больше, чем React + SVG, чтобы построить весь редактор топо-кода в Boltline : JSX ≠ HTML Однако есть пара вещей, которые очень важно помнить при использовании React для XML. Несмотря на «разметку» JSX, на самом деле вы создаете не строки, а объект JS; поля не обязательно соответствуют атрибутам HTML, но относятся к..

Советы SVG, чтобы стать лучшим разработчиком внешнего интерфейса

SVG имеет внешний вид изображений, гибкость Canvas и стиль CSS. Масштабируемая векторная графика (SVG) мощнее, чем думают многие разработчики. Они могут добавлять на ваши сайты различную графику — от простых логотипов до сложной интерактивной графики. Давайте посмотрим, что они из себя представляют, а также как и когда с ними работать. SVG — это элементы DOM! SVG можно вручную добавить в HTML без использования JavaScript. Это делается, как и любой другой базовый элемент, путем..

Изменить цвет SVG с помощью CSS-фильтра

Нам больше не нужно беспокоить дизайнеров, когда цвет SVG немного отличается: просто отфильтруйте его. Введение Работать с талантливыми дизайнерами доставляет такое удовольствие веб-разработчику. Они не только придумывают красивые макеты для страниц и упрощают сложные концепции до простых для понимания визуальных эффектов, но часто дают мне возможность изучить новую технику веб-разработки, чтобы воплотить свои идеи в жизнь. Недавно у меня была такая возможность, когда я создавал..

React, изображения SVG и загрузчик Webpack, чтобы сделать их удобными

Это не новая проблема: дилемма правильного рендеринга SVG с помощью React, но это проблема, с которой мне не приходилось сталкиваться и преодолевать до недавнего времени, и я хотел бы поделиться своим опытом в надежде что это сэкономит кому-то еще несколько часов поиска в Github, StackOverflow и NPM. В моей нынешней компании я работал в двух отдельных группах разработчиков, обе из которых используют микросервисы JavaScript для своих пользовательских интерфейсов: одна использует..

Манипулируем DOM событиями, создавая платформер!

Долгое время я хотел, чтобы все двигалось в браузере. Проблема, с которой я сталкивался долгое время, - это попытки разобраться в синхронном коде и асинхронном коде. Как я могу заставить игрока двигаться, когда я нажимаю клавишу, но смешиваю основанную на событиях природу браузера с синхронным стилем кодирования, который я использую при решении проблем или головоломок. Сегодня мы создадим простого персонажа, который может перемещаться и прыгать в пространстве. Мы добьемся этого с..

Удаление содержимого за пределами экрана в изображениях SVG в масштабе

Я работаю над проектом по обучению и оцениванию на уровне страны, в котором участвуют 1,5 миллиона учащихся, выполняющих оценивание, и сотни авторов контента, создающих элементы оценивания. Одна из проблем, которую я обнаружил при написании, заключалась в том, что мы видели изображения SVG размером более 350 КБ, которые в некоторых случаях содержали только один символ! Быстрый поиск в Google привел меня к замечательному инструменту SVGO (SVG Optimizer) , чтобы посмотреть, сможет ли он..

Как мы научились рисовать текст на холсте HTML5

Андрей Чураков, Frontend Engineer Мы разрабатываем интерактивную доску для совместной работы и используем Canvas для отображения всей графики и текста на досках. Не существует готового решения для отображения текста на холсте, как в обычном HTML. Следовательно, в течение последних нескольких лет мы повторяем это; и мы наконец думаем, что нашли лучшее решение. В этой статье мы расскажем, как перейти от Flash к Canvas и почему мы отказались от использования SVG foreignObject в этом..