Styling x1, x2, y1, y2 of a svg line using css-CodePudding

I want to make my svg cross smaller by styling it's line axis ( so y1,y2 etc for all lines).

How can I do this with 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>

Thanks

CodePudding user response：

You can use transform: scale(0.5); to 'scale' down each line

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>