“如何制作SVG”；“行”；有边界吗？

我有一个小svg小部件，其目的是显示角度列表（见图）

现在，角度是线元素，只有一个笔划，没有填充。但现在我想有一个“内部填充”的颜色和一个“笔划/边框”围绕它。我猜line元素不能处理这个问题，那么我应该使用什么来代替呢

请注意，线条笔划的线条收头是四舍五入的。我希望在解决方案中保持这种效果

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

348

您的线条看起来是不透明的，因此您可以在较粗的线条上用“外部”颜色绘制一条“内部”颜色的细线。

添加第二条线条，坐标相同，但线宽较窄：

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

---

您可以使用带圆角的矩形，但数学有点变化：

  <rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02"  y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/>

---

您也可以使用路径来执行此操作，即使围绕圆形位很棘手：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
  <!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable.
       Obvisouly, if you're generating the path you can use the same variables in code to append to d -->
  <!ENTITY handFill "0.01">
  <!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered -->
  <!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill -->
]>
<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">
      <path d="
        M -&handFill;,0 l0,-0.4
        a &handFill;,&handFill; 0 0,1 &handFill2;,0
        l 0,0.4
        a &handFill;,&handFill; 0 0,1 -&handFill2;,0
      " stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" />
      <text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
        348
      </text>
    </g>
  </g>
</svg>

]>
348

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

---

通过使用

和

可以只更改path元素来更新这两行。演示

谢谢，这是个好主意。但是如何确保“顶”线正好位于“底”线的中心？只需使用相同的坐标和较窄的线宽。用圆顶看起来是正确的。啊，现在我想起来了，我相信你是正确的！谢谢Janne。这就是我最初认为的解决方案。然而，你的看起来没有詹妮的好。矩形的起点和终点在圆的中心和圆的轮廓上没有完全对齐。如果你能让它正确对齐，这个解决方案似乎更容易操作（比如说，如果我想动态添加/删除轮廓，我会这样做）。因此，由于另一个原因，这变得很笨拙。。。你必须使用矩形每个“短边”的中点。这是一个算术问题，你必须从旋转中心减去边界宽度，坦率地说，我相信两条线是一个更简单的解决方案。耶！这稍微好一点，但仍然不完美。。。最初，我将半圆端点的中心与大圆的中心及其轮廓对齐+1表示努力=）