Кривая Безье SVG всегда замыкает путь в браузере и PDF

Question

Я рисую музыкальное связывание звуков кривыми Безье в SVG, чтобы визуализировать их в браузере и разрешить экспорт в PDF.
Работает нормально. Но если вы увеличите масштаб, то увидите, что есть линия, соединяющая две вершины: мне нужно избавиться от этой линии.
В Inkscape линии нет, но она отображается во всех браузерах (особенно в Chrome), даже если она практически не видна. Моя проблема в том, что когда вы распечатываете его как PFD (я просто нажимаю ctrl + P и сохраняю файл), эта линия становится намного толще, и ноты не могут быть опубликованы таким образом!

Мой код:

<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>

А вот как это выглядит при увеличении в Chrome:

И в Adobe:

Не могли бы вы предложить способ исправить это?

_{Свободный перевод вопроса SVG Bézier's curve always closes path in browser and PDF от участника @Smilo90.}

Answer 1

Проблема в том, как вы создали свою форму.

Он состоит из двух отдельных фигур, которые вы объединили в один контур. См. Пример ниже, где я дал двум subpaths разные цвета.

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13" fill="red" opacity="0.5"/>
  <path d="M 28 39 q 15 25 40 -13" fill="green" opacity="0.5"/>
</svg>

Обратите внимание на верхнюю часть формы, где два дополнительных пути (красный и зеленый) имеют общий край. Фактически вдоль этого края образован невероятно тонкий прямоугольник, образованный краями двух дополнительных путей. Когда путь отображается на экране, небольшие различия в способе рисования двух фигур могут иногда приводить к тому, что некоторые пиксели будут видны вдоль этого края. Это может дать вид светло-серой линии.

Вот почему вам нужно было добавить fill-rule = "evenodd" к вашему пути. Это так, что один sub-path проделывает дыру в другом. В противном случае они оба были бы сплошными.

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 M 28 39 q 15 25 40 -13" fill="black"/>
</svg>

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

<svg width="400px" viewBox="0 0 70 60">
  <path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" fill="black"/>
</svg>

Таким образом, фиксированная версия исходного SVG будет выглядеть следующим образом:

<svg height="150px" width="100%"><path d="M 28 39 q 15 29 40 -13 q -25 38 -40 13 Z" stroke="black" stroke-width="0.5" fill="black" fill-rule="evenodd"></path></svg>

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

Кривая Безье SVG всегда замыкает путь в браузере и PDF

Ответы (1 шт):