如何制作一个带有边框的SVG"线"？

Question

我有一个小的svg小部件,其目的是显示一个角度列表(见图).

现在,角度是线条元素,只有笔划而没有填充.但现在我想要一个"内部填充"颜色和围绕它的"笔划/边框".我猜测线元素无法处理,所以我应该使用什么呢？

请注意,线条笔划的line-endcap是圆角的.我想在解决方案中保持这种效果.

<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>

Answer 1

添加第二行,坐标相同但线宽更细:

<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"/>
  <line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>

Answer 2

我找到了一个优雅的解决方案，灵感来自W3C 关于填充和描边的文章的插图。基本上，您将路径移动到定义并使用此定义来绘制两个元素：

<svg width="200" height="200" viewBox="0 0 100 100">
    <defs>
        <line id="line1" x1="25" x2="75" y1="25" y2="75"/>
    </defs>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use>
</svg>

通过使用<defs>和 ，<use>您可以仅更改路径元素来更新这两行。JSFiddle演示