SVG 线宽问题
SVG line width issue
我开始了我的svg学习。我想用svg线做一些技能栏。
但是有些地方我没明白。我为每种技能创建 2 行（一行为空，一行为知识百分比）。
问题是：前两行的高度是我给出的笔划宽度的一半。其他线的高度也不错...
这是一个 jsbin：http://jsbin.com/lewimonize/edit?html,css,output
提前致谢
简答：线被视图框剪成两半。
在y="0"轴上画线时，线宽的一半在轴上方，一半在轴下方。与从 y=0 开始的 viewBox 组合，上面的一半行将被剪掉。
你有三个选择：
- 将行向下移动，以便第一行从
y1="2.5" 开始，例如
- 向上移动视图框：
viewBox="0 -2.5 100 100"
- 将
overflow="visible" 添加到 svg 元素
我开始了我的svg学习。我想用svg线做一些技能栏。
但是有些地方我没明白。我为每种技能创建 2 行（一行为空，一行为知识百分比）。
问题是：前两行的高度是我给出的笔划宽度的一半。其他线的高度也不错...
这是一个 jsbin：http://jsbin.com/lewimonize/edit?html,css,output
提前致谢
简答：线被视图框剪成两半。
在y="0"轴上画线时，线宽的一半在轴上方，一半在轴下方。与从 y=0 开始的 viewBox 组合，上面的一半行将被剪掉。
你有三个选择：
- 将行向下移动，以便第一行从
y1="2.5"开始，例如 - 向上移动视图框：
viewBox="0 -2.5 100 100" - 将
overflow="visible"添加到svg元素