Публикации по теме 'svg'
Как создать инструмент интерактивного дизайна, связанный с Google Sheets через Javascript/HTML?
Один из моих друзей-дизайнеров интерьеров спросил меня, как совместить простую базу данных или техпаспорт с ее планом этажа, чтобы она могла легко и быстро представить его своим клиентам как с графическим дизайном, так и со списками мебели (или другой структурированной информацией) в одном веб-страницу или итоговый слайд.
Как поместить SVG внутрь SVG ? (используя React.js)
При использовании какой-либо библиотеки, такой как диаграмма или что-то еще, в которой есть почти все, что нам нужно, но вы просто хотите немного больше настроить. Я столкнулся с необычным требованием: мне нужно поместить SVG внутрь SVG.
Вначале я думал, что могу просто импортировать как изображение, например:
import YourSVG from "../utils/icons/yoursvgpath.svg";
const customizeSVG = (
<svg>
<g>
<YourSVG /> // it doesn't work.
</g>..
Форматирование значка эскиза
Скетч - удивительный и популярный инструмент для дизайна интерфейсов. К сожалению, иногда активы, которые он экспортирует, могут быть немного нестабильными. Сюда входит .svgs. Sketch использует маски и <defs> хорошо работает для создания многоразовых символов, но, к сожалению, может нарушить работу компонентов разработчика. В моем случае это нарушало работу компонента значка vue.js, который динамически импортировал файл .svg. Я решил создать сценарий для очистки..
Как использовать SVG в React Native
В наши дни SVG очень часто используется специально для пользовательских значков, логотипов и т. Д. В response.js его не так сложно использовать. Но в React Native многие разработчики сталкиваются с проблемами при его интеграции. Я тоже столкнулся с этой проблемой.
В любом случае, попробовав пару решений, я нашел самое простое решение, которым поделюсь с вами. Многие из нас предпочитают использовать svg в img tag, что иногда бывает хорошо. Но здесь я пишу о встроенном svg.
Если вы..
3D-векторные анимации в Elm
Развлекайтесь с новым пакетом OpenSolid
В этом посте я хочу дать короткую демонстрацию реализации трехмерных векторных визуализаций в Elm, визуализированных как чистые SVG.
Вы можете найти живую демонстрацию здесь:
Демонстрация трехмерного вектора вяза elm-vector-demo-1.herokuapp.com
OpenSolid
Код в основном основан на новых пакетах OpenSolid. Я был очень взволнован, увидев, что в Elm появилась полнофункциональная векторная..
234 день — код 365
Чт, 04 августа 2016 г.
Отладка
Была любопытная ошибка, которую я сегодня помог отладить — SVG отображался как битое изображение, несмотря на то, что путь был правильным. Я экспериментировал с несколькими вещами, а затем понял, что на вкладке «Сеть» в Chrome DevTools я смог загрузить изображение… Это помогло моему коллеге, который посмотрел на заголовок ответа, который показал, что SVG обслуживается как БИНАРНЫЕ данные! (тип содержимого: двоичный/октетный поток) вместо..
Изменение изображения SVG на компонент React
Реакт+javascript, Реакт+машинопись
В проектах React всегда лучше заменить простое изображение SVG на компонент React по следующим причинам.
Если у вас есть сложные SVG с множеством элементов и атрибутов, синтаксис JSX для рендеринга SVG в React может стать сложнее в обслуживании. Затем, если вы хотите использовать один и тот же SVG в разных компонентах, мы можем создать простую папку и файл SVG. Разделить SVG на отдельные компоненты, чтобы упростить повторное использование и..
