Почему у svg элемента белое лишнее белое пространство?

Question

[Overlord934]

Посреди стрелки лишнее белое пространство, как исправить код чтоб его не было?

<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.125 15.375L27.25 22.5L20.125 29.625M43.875 22.5C43.875 10.6949 34.3051 1.125 22.5 1.125C10.6949 1.125 1.125 10.6949 1.125 22.5C1.125 34.3051 10.6949 43.875 22.5 43.875C34.3051 43.875 43.875 34.3051 43.875 22.5Z" stroke="#7E2832" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Comments

[Niksak]

Запустил твой svg код:

Проблем нема

[Overlord934]

Niksak, при заливке фона это происходит. Условно при hover эффекте

[Niksak]

Overlord934, Так ты ховер делаешь на стрелку, цвет ховера сливается со цветом текста и выглядит будто место между концами угла осталось белым

[Overlord934]

Niksak, немного не понял. А как это можно исправить?

[Niksak]

Overlord934,
Даа, вот я и сделал ховер) Изменил бэкграунд.
А честно, хз как исправить, будто это косяк иконки что-ли. Должен по идее закраситься весь круг но почему-то место между двумя концами этой стрелки как-будто отдельным считается и не краситься.
Т.е. тебе нужно чтобы весь круг был красным получается

[Overlord934]

Niksak, Да, нужно чтоб был весь красным

Answer 1

[Максим]

Как было сказано, надо было разделить этот path на два

Первый от М до z и второй от M и до z

Answer 2

[VoidVolker]

Вот тут в редакторе отлично видно, почему так:


Исправить достаточно просто: отделить стрелку в отдельную фигуру.