Для моего веб-приложения я создаю SVG-элементы в Illustrator, а затем использую их в библиотеке элементов, которые пользователи могут добавлять на холст ткани.
Некоторые элементы простые, но некоторые сложные с несколькими сложными путями и т. Д.
Я столкнулся с необычной проблемой: когда я создаю путь с градиентной заливкой, а затем копирую этот путь, сохраняю SVG и добавляю его на холст, только первый путь будет иметь градиент, а остальные будут плоские цвета.
Вот скриншот того, что я имею в виду ...
После экспериментов и проб разных вещей, я наконец обнаружил, что это происходит, потому что пути имеют одинаковые градиентные свойства.
Таким образом, если ползунок градиента (цветовые остановки, непрозрачность, местоположение и т. Д.) Двух или более контуров имеют одинаковые свойства в Illustrator, то проблема возникает.
Таким образом, обходной путь состоит в том, чтобы изменить что-то вроде местоположения (например) на 99,9% вместо 100% на скопированном пути, тогда проблема исчезнет. Однако, это быстро станет утомительным и раздражающим способом исправить это. По сути, каждый путь с градиентом должен иметь уникальный настроенный градиент и не может быть идентичен другим свойствам градиента пути.
Вот еще скриншоты, чтобы лучше объяснить ...
После внесения этого изменения ...
Местоположение первого и второго пути градиента отличается.
Первый, третий, четвертый и пятый пути имеют одинаковый градиент.
Вот как это выглядит, когда я сейчас добавляю его на холст ...
Вот код, который я использую для добавления SVG на холст ...
fabric.loadSVGFromURL(image, function(objects, options) {
var oImg = fabric.util.groupSVGElements(objects, options);
oImg.perPixelTargetFind = true;
oImg.targetFindTolerance = 4;
canvas.add(oImg);
canvas.renderAll();
});
Может кто-нибудь сказать мне, почему это происходит, и если есть способ исправить это с помощью кода, а не Illustrator? У меня есть сотни элементов для создания, которые будут иметь много путей с одинаковыми градиентами. Я знаю, что будет очень трудно волноваться о путях, не имеющих одинаковый градиент.
http://jsfiddle.net/oc70xjsq/
Ссылка на SVG