Why does SVG appear cropped despite of viewbox being proportionally equal to the width and height?

Question

I was just plaing around with this SVG image , the svg looks as below:

<svg width=200 height=200 viewbox="0 0 240 240" >
    <path d="M220, 220
            A200, 200, 0, 0, 0, 20, 20
            L 20, 220
            Z"
    fill = "lightskyblue">
    </path>
</svg>

Now notice two things width=200 height=200 the height and width set to 200 each and the viewbox set to "0 0 240 240" . Now if I set the viewbox to "0 0 200 200" the image appears cut, now why is that?

I believe that since the height and width is set to 200 and 200 each and the viewbox set to "0 0 200 200" the svg should be 100% visible, but it's not the case.

Answer 1

您的视图框尺寸设置为200 ，但是路径包含值220 ，因此svg显示为已裁剪，因为它超出了视图框的范围