Как сделать вот эти косые линии и чтобы они всегда одним концом упирались в эту часть прицела, а другим в конец бордера заголовка?

Как сделать вот эти косые линии и чтобы они всегда одним концом упирались в эту часть прицела, а другим в конец бордера заголовка?

Есть svg (четверть прицела) и заголовок с бордером. Нужно чтобы линия была между бордером заголовка и центром svg.

Пробовал подгонять линией svg ( <line id="line" x1="149" y1="21" x2="120" y2="90" и т.д.), но там только фиксированные значения, при изменении разрешения всё ломается.

https://github.com/bessonniy11/mouseenter