SVG圆角规

Question

我最近开始与SVG一起工作，并且正在从事仪表的生产。设计有圆角。

我找到了一个不错的插件来制作仪表小部件。但是它没有提供圆角的任何选择。 https://codepen.io/naikus/pen/BzkoLL

我在仪表部件上发现了另一个不错的打击。这是一种不同的方法，但是没有圆角的方法。

<svg viewBox="0 0 100 100" class="gauge">
  <path class="dial" fill="none" stroke="#eee" stroke-width="2" d="M 21.716 78.284 A 40 40 0 1 1 78.284 78.284"></path>
  <text x="50" y="50" fill="#999" class="value-text" font-size="100%" font-family="sans-serif" font-weight="normal" text-anchor="middle">36</text>
  <path class="value" fill="none" stroke="#666" stroke-width="2.5" d="M 21.716 78.284 A 40 40 0 0 1 24.796 18.94"></path>
</svg>

Answer 1

您可以在stroke-linecap上使用paths属性，并为其赋予值"round"：

<svg viewBox="0 0 100 100" class="gauge">
  <path class="dial" fill="none" stroke="#eee" stroke-width="2" d="M 21.716 78.284 A 40 40 0 1 1 78.284 78.284" stroke-linecap="round"></path>
  <text x="50" y="50" fill="#999" class="value-text" font-size="100%" font-family="sans-serif" font-weight="normal" text-anchor="middle">36</text>
  <path class="value" fill="none" stroke="#666" stroke-width="2.5" d="M 21.716 78.284 A 40 40 0 0 1 24.796 18.94" stroke-linecap="round"></path>
</svg>