SVG線幅の問題

Question

私は自分のSVG学習を開始しました。そして、私はsvgラインでいくつかのスキルバーをしたい。

しかし、私が理解できなかったことがあります。スキル1つにつき2行（1つは空、1つは知識の割合）を作成します。

問題は次のとおりです。最初の2行は、ストロークの幅の半分の高さです。そして、他のラインが良い高さを持っている...ここ

がjsbinです：事前に http://jsbin.com/lewimonize/edit?html,css,output

おかげ

Answer 1

短い答え：行がビューボックスで半分にクリップされます。

y="0"軸に線を描画すると、線幅の半分が軸の上にあり、半分がその下にあります。 で始まるviewBoxと組み合わせると、上の行の半分がクリップされます。 viewBox="0 -2.5 100 100"

がsvg要素

に overflow="visible"を追加します。最初のものはビューボックスを上に移動例

ため、y1="2.5"で開始されるように、

• 移動行は下：

  は、次の3つのオプションがあり