Html SVG线宽问题_Html_Css_Svg_Line

Html SVG线宽问题

html css svg

Html SVG线宽问题,html,css,svg,line,Html,Css,Svg,Line,我开始学习svg。我想用svg行做一些技巧但有件事我不明白。我为每个技能创建2行（一行为空，一行为知识百分比）问题是：前两行的高度只有我给出的笔划宽度的一半。其他线条的高度也很好这是一个jsbin：提前感谢简短回答：线路被视图框剪成两半在y=“0”轴上绘制直线时，一半线宽在轴上方，一半线宽在轴下方。与从y=0开始的viewBox相结合，上面的半行将被剪裁您有三种选择：例如，将行移低，使第一行从y1=“2.5”开始向上移动视图框：viewbox=“0-2.5 100” 将over

我开始学习svg。我想用svg行做一些技巧

但有件事我不明白。我为每个技能创建2行（一行为空，一行为知识百分比）

问题是：前两行的高度只有我给出的笔划宽度的一半。其他线条的高度也很好

这是一个jsbin：

提前感谢

简短回答：线路被视图框剪成两半

在

y=“0”

轴上绘制直线时，一半线宽在轴上方，一半线宽在轴下方。与从

y=0

开始的

viewBox

相结合，上面的半行将被剪裁

您有三种选择：

例如，将行移低，使第一行从
```
y1=“2.5”
```
开始
向上移动视图框：
```
viewbox=“0-2.5 100”
```
将
```
overflow=“visible”
```
添加到
```
svg
```
元素中

y=“0”

y=0

viewBox

例如，将行移低，使第一行从
```
y1=“2.5”
```
开始
向上移动视图框：
```
viewbox=“0-2.5 100”
```
将
```
overflow=“visible”
```
添加到
```
svg
```
元素中