使用css为svg行的x1、x2、y1、y2设置样式

Question

我想通过设置svg的线轴样式来缩小它的交叉(因此所有线都是y1、y2等(。

如何使用css来完成此操作？

<svg viewBox="0 0 24 24">
<line x1="0" y1="4" x2="24" y2="4" />
<line x1="0" y1="12" x2="24" y2="12" />
<line x1="0" y1="20" x2="24" y2="20" />
</svg>

感谢

Answer 1

您可以使用transform: scale(0.5);"缩放"每行

svg > line {
transform: scale(0.5);
}

<svg viewBox="0 0 24 24">
<line x1="0" y1="4" x2="24" y2="4" stroke="black" />
<line x1="0" y1="12" x2="24" y2="12" stroke="black" />
<line x1="0" y1="20" x2="24" y2="20" stroke="black" />
</svg>