SVG元素 中和viewBox搭配的属性为preserveAspectRatiosvg下的图形元素都是在viewBox里绘制的svg的大小及preserveAspectRatio属性的设置，决定了图形最终显示的位置及大小关于viewBox和preserveAspectRatio参数的值及相互之间的详细关系，这里不做描述，可参考相关的资料链接描述 这里说明下问什么红色矩形距离SVG元素块左边的距离是110问题中，svg标签中没有提供preserveAspectRatio的值，在计算过程中就会使用系统默认的xMidYMid meetxMidYMid 要求 viewBox的中心点和viewPort的中心点对齐meet要求svg下的图形元素按比例缩放，要求整个viewbox在viewport能够完整地显示。同时要求竟可能大的放大红色的矩形元素的大小及长宽比都符合要求 viewBox的中心点和viewPort的中心点对齐的结果是，viewBox距离左边为(400-200)/2=100,距离顶部为0，因为2者高度相同meet的结果是svg图像没必要缩放，因为高度相同，并且已经完整地显示在viewport中了那么结合红色矩形属性的x=10，y=10,width=150,height=150 可以计算出红色矩形的距离左边的距离为100+10，顶部的距离为0+10
极客观点
项目管理
HarmonyOS
SVG元素 中和viewBox搭配的属性为preserveAspectRatio
svg下的图形元素都是在viewBox里绘制的
svg的大小及preserveAspectRatio属性的设置，决定了图形最终显示的位置及大小
关于viewBox和preserveAspectRatio参数的值及相互之间的详细关系，这里不做描述，可参考相关的资料
链接描述
这里说明下问什么红色矩形距离SVG元素块左边的距离是110
问题中，svg标签中没有提供preserveAspectRatio的值，在计算过程中就会使用系统默认的xMidYMid meet
xMidYMid 要求 viewBox的中心点和viewPort的中心点对齐
meet要求svg下的图形元素按比例缩放，要求整个viewbox在viewport能够完整地显示。同时要求竟可能大的放大
红色的矩形元素的大小及长宽比都符合要求
viewBox的中心点和viewPort的中心点对齐的结果是，viewBox距离左边为(400-200)/2=100,距离顶部为0，因为2者高度相同
meet的结果是svg图像没必要缩放，因为高度相同，并且已经完整地显示在viewport中了
那么结合红色矩形属性的x=10，y=10,width=150,height=150
可以计算出红色矩形的距离左边的距离为100+10，顶部的距离为0+10