javascript - 分析项目 SVG 路径

Question

我无法弄清楚如何使圆的路径走在中间。我在 jsfiddle 上有一个例子。

基本上，我们如何让这条黑色路径走在中间？这是路径(svg 标签中的第二个):

[![在此处输入图像描述][1]][1]

https://jsfiddle.net/6e1z6xkq/

<div align="center">
<div class="circleDraw">
<svg width="116" height="100">
  <g transform="translate(58,58)">
    <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928L35.23804438347299,29.568230045580812A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(100, 150, 100);">
    </path>
    <path d="M-90.430577700900734,97.281681361819274A58,58 0 0,1 -96.07604799105425,3.22779870395063L-96.54307254462923,7.939288627271193A46,46 0 0,0 -35.238044383472996,29.568230045580805Z" style="fill: rgb(255, 1, 1);" width="15px" height="20px">
    </path>
</svg>
</div>
</div>

Answer 1

你想要像下面这样的东西(尽管我会发现你的SVG源很冗长。你可以从带有绿色笔划和适当笔划宽度的单个移动和圆弧绘制命令得到相同的结果。并且应该没有必要对于变换 - 这看起来像绘图工具导出。)

          <div align="center">
            <div class="speedometer--points">
              <svg width="116px" height="100px">
                <g transform="translate(58,58)">
                  <path d="M-44.430577700900734,37.281681361819274A58,58 0 1,1 44.43057770090073,37.28168136181928 L35.23804438347299,29.568230045580812 A46,46 0 1,0 -35.238044383472996,29.568230045580805Z" fill="green">
                  </path>
              <path d="M -45 35 l 45 -45" stroke="red" stroke-width="5">
              </path>
              </g>
              </svg>
             </div>
        </div>