title: How to make an SVG "line" with a border around it?
body: <p>I have a little svg widget whose purpose is to display a list of angles (see image). </p>
  
  <p>Right now, the angles are line elements, which only have a stroke and no fill. But now I'd like to have an "inside fill" color and a "stroke/border" around it. I'm guessing the line element can't handle this, so what should I use instead?</p>
  
  <p>Notice that the line-endcap of the line's stroke is rounded. I'd like to maintain this effect in the solution.</p>
  
  <p><img src="https://i.stack.imgur.com/g0CYS.png" alt="Angle Line"></p>
  
  <pre><code>&lt;svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;g&gt;
      &lt;g&gt;
        &lt;circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/&gt;
        &lt;line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/&gt;
        &lt;line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/&gt;
      &lt;/g&gt;
      &lt;g class="lsNorthAngleHandsContainer"&gt;
        &lt;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"/&gt;
        &lt;text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)"&gt;
          348
        &lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>