Избавьтесь от тонких белых линий между стыками фигур

Я создал значок, состоящий из основных линий/фигур в Adobe Illustrator, а затем сделал его одной цельной непрерывной формой.

Я хочу использовать этот значок в качестве предварительного загрузчика на веб-сайте, идея заключается в том, что каждый «сегмент» скользит/исчезает один за другим. Поэтому для этого я нарезал твердую фигуру, чтобы я мог анимировать каждую секцию по отдельности. Я сделал это, но между некоторыми фигурами есть тонкие белые линии (изображение прилагается). Я проверил соединения и не думаю, что смогу сблизить фигуры! Координаты/точки кажутся точно такими же.

Вы можете увидеть, что происходит на изображении ниже:

введите описание изображения здесь

Есть ли способ обойти это? Это действительно повлияет на качество/резкость значка. Я предполагаю, что смогу как-то исправить это, поскольку я видел много более сложных форм, у которых нет видимых «соединений».

Вот источник SVG, с которым я работаю:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249 351.5" enable-background="new 0 0 249 351.5" xml:space="preserve">
        <path d="M0,0l39,39.9v84.8l85,84.9v57L0,141.8V0z"/>
        <path d="M124,124.8v57L39,96.9v-57L124,124.8z"/>
        <path d="M124,124.8L249,0v57L124,181.8V124.8z"/>
        <path d="M209,96.9L249,57v169.7L124,351.5v-57l85-84.9V96.9z"/>
        <path d="M124,351.5L0,226.7v-57l124,124.8V351.5z"/>
</svg>

Также codepen, где вы можете увидеть значок на веб-странице:

http://codepen.io/moy/pen/yyvVZm

И как это анимируется (чтобы вы могли понять, почему я разбил форму):

http://codepen.io/anon/pen/xbYmRJ

Еще раз спасибо, надеюсь, что кто-то может помочь!

Объедините фигуры в один непрерывный контур и анимируйте штриховой штрих поверх него. Это артефакт рендеринга, так как написать движок рендеринга заново невозможно. (механизм рендеринга основан не на выборке, а на предположениях о том, как соединяются полигоны, что в определенных ситуациях является плохой ставкой)
Если вы выберете все якоря по вертикали и используете Object > Path > Averageи отметите Verticalи нажмете OK, будет ли это лучше? @joojaa прав, что это проблема рендеринга на экране. Обычно на отпечатках не отображается линия волос, и сохранение в виде растра с Art Optimizedнастройками сглаживания обычно также удаляет ее. Но если он отображается в SVG, вам может потребоваться переосмыслить соединения.
Вы можете адаптировать подход, аналогичный предложенному в этом ответе .
Спасибо за ответы. Я пробовал Object > Path > Average > Vertical, но, похоже, это не имело никакого значения. Я не думаю, что смогу сохранить SVG с помощью Art Optimised? Я посмотрел присоединения @Scott, и они кажутся в порядке. Все 5 диагональных линий имеют одинаковую форму, просто продублированы и перемещены, поэтому они должны быть согласованы. Увеличив масштаб, я вижу, что все плоские соединения на 100% плоские, без выпуклостей или чего-то еще. Любые другие идеи по переосмыслению объединений? Еще раз спасибо - Стив
Проверьте этот вопрос на GDSE: graphicdesign.stackexchange.com/questions/15475/… . Это должно помочь.

Ответы (1)

Вот идея:

Что, если вы загрузите сегменты поэтапно слоями, при этом каждый слой будет определен как один путь? 1. Нагрузите сегмент 1
2. Нагрузите сегменты 1 и 2 поверх 1
3. ...

(Если бы вы разместили исходный код SVG, это помогло бы ответить на вопрос.)

ОБНОВИТЬ:

Вот ссылка, которая может быть полезна: http://css-tricks.com/animating-svg-css/ . Обратите особое внимание на пример. Вот он в CodePen, где вы можете настроить код: http://codepen.io/chriscoyier/pen/dvjhn

Обратите внимание, что здесь нет объектов, только пути.

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

Почему? Поскольку, хотя масштабируемая векторная графика представляет собой математически определенное изображение, которое выглядит одинаково при разных разрешениях, аппаратное обеспечение дисплея понимает только пиксели, которые выровнены, как квадраты на миллиметровой бумаге.

Чтобы понять, что я имею в виду, попробуйте медленно масштабировать любое из ваших изображений вверх и вниз. При определенных размерах внешние вертикальные зазоры между объектами (2 слева и 1 справа) исчезнут. Здесь края объектов выравниваются с пиксельной сеткой дисплея. (Однако центральные вертикальные зазоры кажутся конструктивным недостатком.)

Но промежутки (или перекрытия) между диагональными (или изогнутыми) краями объектов всегда будут, потому что базовая структура сетки дисплея не может правильно отобразить любой край, кроме горизонтального или вертикального.

Решение: не создавайте отдельные полигональные объекты и не ждите, что они будут плавно соединяться друг с другом; создавать пути , охватывающие все полигоны в пределах одного определения. Без краев, без зазоров.

SVG — мощный инструмент, и пути лежат в основе его силы.

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

Если у вас есть дополнительные вопросы, я постараюсь ответить на этом форуме, или вы можете отправить мне электронное письмо (нажмите на мое имя пользователя, чтобы увидеть адрес) .
ОБНОВЛЕНИЕ — 30 января 2015 г.: К сожалению, это запрещено.

НОВОЕ ОБНОВЛЕНИЕ:

После того, как я закончил со всей этой чепухой о путях, я наткнулся на эту ссылку, которая, кажется, опровергает все, что я сказал: snapsvg.io/demos/#mascot (мой уровень на этом форуме слишком низок, чтобы публиковать третью ссылку в ответ, поэтому вам придется скопировать/вставить ссылку в браузер.)

У меня нет сил исследовать это, но, похоже, это позволяет достичь того, что вы пытаетесь сделать. Я придерживаюсь путей; Я понимаю их.

УДАЧИ

Нет проблем, я выложу исходник, который у меня есть. Думаю, мне придется опубликовать это как ответ - надеюсь, все в порядке!
ОБНОВЛЕНИЕ: я только что понял, что могу отредактировать свой ответ, там вы можете увидеть код SVG. Спасибо!
Большое спасибо! Я очень рад использовать path вместо этого, если он достигает того, что мне нужно! Та ссылка на Snapsvg, которую вы разместили, на самом деле очень, очень близка к тому, что я пытаюсь сделать. Я бы хотел, если бы javascript, который он использует, немного помог позиционированию. В любом случае, спасибо за ответ еще раз, я отдам это назад, изменив полигоны на пути! :)
Как лучше всего преобразовать мои полигоны в пути? Я собирался отправить вам быстрое электронное письмо, но я не мог видеть адрес ..
Избавьтесь от тонких белых линий между стыками фигур
СпросиСетьПолитика конфиденциальности1y, 0v