Пространство между штрихами SVG и заполнением

Question

Наполнение и поглаживание круга такого же цвета и stroke-width, превышающего определенный размер, создает странную прозрачную область «между двумя областями красок». Что происходит?

Это происходит как в Chrome, так и в Firefox, поэтому это может быть спецификация, но я не смог найти какой-либо язык в спецификации об этом поведении.

Fiddle

<svg viewBox="0 0 300 300"> 
    <circle cx="100" cy="100" r="8" 
    stroke="#000" stroke-width="40" 
    fill="#000"/> 
</svg> 

Производит эту визуализацию:

Answer 1

Как заметил Роберт Лонгсон, проблема возникает, когда удар перекрывается таким образом, что он создает отверстие-пончик при преобразовании контура удара в отдельный путь (в зависимости от правила обмотки/заполнения расчеты).

Зазор между заполнением и ходом в вашем конкретном примере вызван «внутренним» краем хода, проходящим по всей области заполнения и с другой стороны.

Это очень странно, когда вы стреляли штрихами, как показано в примерах от Tavmjong Bah's discussion article.

Это, к сожалению, ни по спецификации SVG, ни по спецификации. Вместо этого спецификация в этот момент времени оставила вопрос неопределенным.

SVG working group discussion is here.

На данный момент WebKit, Blink и Firefox на Mac/Android накладывают штрихи с вырезами, используя графическую библиотеку Skia или CoreGraphics от Apple.

IE/Edge и Firefox в Windows/Linux просто рисуют полный штрих без вырезов, как и Inkscape, Illustrator и большинство PDF-рендеринга (сама спецификация PDF не является обязательной).

Каждый, о котором я говорил, согласен с тем, что вырезы являются неоптимальным результатом. Но так много браузеров, использующих механизмы рендеринга, которые делают это таким образом, рабочая группа SVG не желала делать более интуитивное поведение инсульта строгим требованием. Так вместо этого, SVG 2 spec has a warning-to-authors с фигурой образца:

На данный момент, лучшая перспектива для внесения изменений будет подавать вопросы (или свой код) на Skia library. Если это было изменено, это накладывает давление на Apple для обновления, чтобы соответствовать, и спецификация SVG могла бы стать официальной.

Answer 2

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