svg { margin: 20px; } 
 <svg viewBox="0 0 100 100" width="350px" height="70px" preserveAspectRatio="none" transform="scale(1,-1)"> <path d="M 0,0 L 20,90 L 40 10 L 70 10" fill="none" stroke-linecap="round" stroke="#886ce6" stroke-width="5px"/> </svg>

how do i make the edge of the line rectangular? The lines also have different widths. Maybe this is obvious, but how to avoid it? svg for me is still poorly familiar just

    1 answer 1

    Look, you have a baseview viewbox - 100 by 100 pixels, and you stretched it 350 by 70, so the lines may be different.

    Besides, strange transform = "scale (1, -1) is for what?

    stroke-linecap - responsible for angles, possible values: butt, round, square. you have - round, this is their round. Or remove or change to square for example.

    • the corners become sharp .. Changed viewBox="0 0 100 100" to viewBox="0 0 350 70" and it helped!) thanks. I just wanted to use interest with convenience. `transform =" scale (1, -1) `in order to flip svg into the usual coordinate system - Nikolay
    • By transform - got the idea)) - MaxWall
    • There, in order for the rules to work, you need to register transform: scale(1,-1); transform-origin: 50%; transform: scale(1,-1); transform-origin: 50%; . Suddenly someone will come in handy - Nikolay