【发布时间】：2016-05-06 06:16:25
【问题描述】：
我开始了我的 svg 学习。我想用 svg 线做一些技能栏。
但是有一点我不明白。我为每个技能创建了 2 行（一个是空的，一个是知识百分比）。
问题是：前两行的高度是我给出的笔划宽度的一半。其他线条的高度都很好......
这是一个 jsbin：http://jsbin.com/lewimonize/edit?html,css,output
提前致谢
【问题讨论】：
【发布时间】：2016-05-06 06:16:25
【问题描述】：
简答：线被视图框剪成两半。
在y="0" 轴上画线时，线宽的一半在轴上方，一半在轴下方。结合以y=0 开头的viewBox，将剪掉上面的一半。
您有三个选择：
- 将行向下移动，例如，第一行从
y1="2.5"开始 - 向上移动视图框：
viewBox="0 -2.5 100 100" - 将
overflow="visible"添加到svg元素
【讨论】：
-
但我遇到的另一个问题是：我想将 div 与技能栏居中。我尝试了很多东西，但没有任何效果，或者很糟糕（例如 svg 线条反应很奇怪）