javascript - 尽管 View 框按比例等于宽度和高度，为什么 SVG 仍显示为裁剪的？

Question

我只是闲逛 this SVG image ，svg 如下所示:

<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>

现在请注意两件事width=200 height=200高度和宽度分别设置为200以及 View 框设置为“0 0 240 240”。现在，如果我将 View 框设置为“0 0 200 200”，图像会出现剪切，这是为什么？

我相信，由于高度和宽度分别设置为200和200，并且 View 框设置为“0 0 200 200”，因此svg应该是100％可见的，但事实并非如此。

Answer 1

您的 View 框尺寸设置为 200，但您的路径包含 220 的值，因此 svg 会出现裁剪，因为它超出了 View 框的范围