我刚刚查看了这个代码片段,代码如下:
<svg width=200 height=200 viewbox="0 0 225 225" >
<path d="M220, 220
A200, 200, 0, 0, 0, 20, 20
L 20, 220
Z"
fill = "lightskyblue">
</path>
</svg>
现在当我调整视口并将值更改为
viewbox="100 100 225 225"
时,它会产生类似于以下效果的结果:transform:translate(-100px, -100px);
我认为当我将min-x、min-y
指定为100
时,viewbox
的值应该产生以下效果:
transform:translate(100px, 100px);
但实际上效果类似于:
transform:translate(-100px, -100px);
为什么呢?有人能解释一下吗?
<circle cx="100" cy="100" r="10"/>
,它将位于视口的左上角。 - Paul LeBeau