Каковы хорошие API для обработки векторных изображений? - PullRequest
Новая
       65

Каковы хорошие API для обработки векторных изображений?

0 голосов
/ 11 апреля 2020

Я хочу иметь возможность импортировать файлы SVG из файловой системы, накладывать на них слои, изменять цвета заливки и затем экспортировать их как один векторный файл.

1 Ответ

0 голосов
/ 11 апреля 2020

Лучшим источником для ссылки будут их официальные документы: https://svgjs.com/docs/3.0/getting-started/

Следующим в строке источника будет поиск переполнения стека по svg. js tag: { ссылка }

Теперь быстрое вступление с моей стороны.

SVG. JS позволяет очень интенсивно работать с SVG. Вы можете импортировать SVG в ваш код и начать манипулировать им. Вы можете изменить цвет, размер и даже добавить события и анимацию.

Однако, прежде чем начать работу с SVG, вы должны убедиться, что SVG сжимается с помощью какого-либо онлайн-инструмента, такого как: https://jakearchibald.github.io/svgomg/ и после сжатия вы должны отредактировать свой SVG-файл, добавив селекторы классов в SVG для путей (регионов), чтобы вы могли выбирать эти пути из кода JS. Пример SVG из одного из проектов, где я использовал эту технику (обрезано для простоты): 

<svg id="svg-map" class="svg-map" version="1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 363 624">
  <path class="svg-path-1" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-2" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-3" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
</svg>

Вы можете сохранить SVG в какой-то папке и отобразить его, используя тег изображения на вашем HTML страница

Установите в своем проекте (например, используя NodeJS): 

npm install svg.js

Затем импортируйте эту библиотеку в ваш JS код, например: 

import { SVG } from '@svgdotjs/svg.js'

И теперь вы можете выбрать SVG со своей страницы, используя следующий код: 

let mapContainer = SVG.select('.some-svg-class');
let myMapObject = mapContainer.first();

и установить область просмотра: 

myMapObject.viewbox(0, 0, 500, 700);

Теперь вы можете l oop по всем путям ( областей) карты и выполните некоторые манипуляции, подобные этой: 

let svgRegionPaths = myMapObject.select('path');
svgRegionPaths.each(function(i, children) {
  this.opacity(0.7);
});

Это всего лишь пример. Вы можете сделать намного больше с этой библиотекой. Я не показал пример выбора путей с помощью селекторов классов, но я надеюсь, что вы поняли идею.

Мне удалось связать это с React и заставить его работать в соответствии с моим стилем кодирования и требованиями для применение.

...