Как сделать SVG «линию» с рамкой вокруг нее?

У меня есть небольшой виджет svg, предназначенный для отображения списка углов (см. Изображение).

Прямо сейчас углы являются линейными элементами, которые только иметь обводку и нет заливки. Но теперь я хотел бы иметь цвет "внутренней заливки" и "обводку / границу" вокруг нее. Я предполагаю, что элемент линии не может справиться с этим, так что я должен использовать вместо этого ?

Обратите внимание, что конец строки обводки линии закруглен. Я хотел бы сохранить этот эффект в решении.

<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
  <g>
    <g>
      <circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
      <line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
      <line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
    </g>
    <g class="lsNorthAngleHandsContainer">
      <line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>