为什么我的 SVG 使用中心原点坐标？

Question

为什么我的圈子不是从左上角开始？ 我在这里想念什么？

我不确定为什么 X 轴的 0 位于图形的中心。

我要疯了吗？ :)

 <svg xmlns="http://www.w3.org/2000/svg" width="150" height="20" viewBox="0 0 100 20"> <svg x="0" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="20" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="40" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="60" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="80" y="0" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> </svg>

Answer 1

您使用的是viewBox="0 0 100 20"这意味着用户单位的宽度为 100，高度为 20。同时您使用的是width="150" height="20"您可以删除 height 属性。 在这种情况下，将计算高度，以便与 w/h 保持一致。 如果您需要width="150" height="20"您可以尝试使用不同的viewBox="0 0 150 20" 。

阅读有关viewBox属性的更多信息

 svg{background:#d9d9d9}

 <svg xmlns="http://www.w3.org/2000/svg" width="150" viewBox="0 0 100 20"> <svg x="0" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="20" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="40" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="60" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> <svg x="80" y="0" viewBox="0 0 200 200" width="20" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" /> </svg> </svg>