Странные полоски в паттерне

#svg

                    
Пробую сделать такой pattern, и непонятно откуда появляются вертикальные полоски,
которых быть не должно.

При этом сам элемент pattern'a если вывести (смотрите пример) никаких полосок нет.



body {
  margin: 0;
  background: black;
}

.c1 {
  fill: #ffd77a;
  stroke: #ffd77a;
}

.c2 {
  fill: #ffed7a;
  stroke: #ffed7a;
}

.c3 {
  fill: #fbff7a;
  stroke: #fbff7a;
}

.c4 {
  fill: #e4ff7a;
  stroke: #e4ff7a;
}

.c5 {
  fill: #ceff7a;
  stroke: #ceff7a;
}

.c6 {
  fill: #b8ff7a;
  stroke: #b8ff7a;
}

.c7 {
  fill: #a2ff7a;
  stroke: #a2ff7a;
}





Прилагаю скриншот на случай если это глюк моего рендера (Yandex Browser)



А вот если размер паттерна сделать другой то всё работает нормально



body {
  background: black;
  margin: 0;
}

.c1 {
  fill: #ffd77a;
  stroke: #ffd77a; }

.c2 {
  fill: #ffed7a;
  stroke: #ffed7a; }

.c3 {
  fill: #fbff7a;
  stroke: #fbff7a; }

.c4 {
  fill: #e4ff7a;
  stroke: #e4ff7a; }

.c5 {
  fill: #ceff7a;
  stroke: #ceff7a; }

.c6 {
  fill: #b8ff7a;
  stroke: #b8ff7a; }

.c7 {
  fill: #a2ff7a;
  stroke: #a2ff7a; }





Во втором примере размер pattern'a не 50, а 40.

Вопрос в том, почему это так странно работает, и как правильно писать код чтобы таких
артефактов не было.

Как поправить данный пример я методом проб и ошибок понял, можно сделать stroke-width:
5px; и артефакты пропадают. Но мне не понятна логика их появления. 

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

Ответы

Ответ 1

Проведя ряд тестов понял откуда берутся полосы. При размерах родительского элемента
которые делятся нацело с размером паттерна - всё хорошо. Когда деление рождает дробные
числа получаются зазоры. 

Смысл в том что у меня в примере есть параллельные линии между элементами el1 и big1,
при кратных размерах они рисуются вплотную, при дробных размерах появляется зазор.

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

Вот пример для тестов. Верхние квадраты сделаны с размерами символа кратными разерам
внутри символа. Нижние квадраты - некратные размеры. Как можно видеть в нижних квадратах
появляется зазор. Специально что бы его было лучше видно добавил белые полосы, на границе
легко отслеживается смена чёрного и белого.








Привожу скриншот как это выглядит у меня на случай если у кого-то другой рендер.