Swift中SVG转UIBezierPath后绘制视图存在大量多余留白如何解决

架构老林

2026-9-25

问题解决方案：UIBezierPath绘制多余留白问题

你遇到的留白问题核心来自两个逻辑缺陷：

转换得到的UIBezierPath自带原始坐标偏移，路径的bounds.origin不是(0,0)，你没有消除这部分偏移就直接做缩放，导致路径本身自带了空白区域
原有缩放逻辑只取了宽高中的最小值做统一缩放，没有适配容器的实际宽高比，也没有做居中对齐调整

步骤1：替换ShapeView实现

直接替换你现有的ShapeView代码即可，新的实现会先消除路径原始偏移，再做适配容器的等比缩放，自动居中显示：

struct ShapeView: Shape {
    let bezier: UIBezierPath
    let pathBounds: CGRect
    
    func path(in rect: CGRect) -> Path {
        // 消除路径原始坐标偏移，将路径左上角对齐到原点
        let offsetTransform = CGAffineTransform(translationX: -pathBounds.minX, y: -pathBounds.minY)
        let adjustedPath = Path(bezier.cgPath).applying(offsetTransform)
        
        // 计算适配容器的等比缩放比例
        let scaleRatio = min(rect.width / pathBounds.width, rect.height / pathBounds.height)
        
        // 计算居中偏移量，保证路径在容器内居中
        let centerOffsetX = (rect.width - pathBounds.width * scaleRatio) / 2
        let centerOffsetY = (rect.height - pathBounds.height * scaleRatio) / 2
        
        // 应用最终变换
        let finalTransform = CGAffineTransform(scaleX: scaleRatio, y: scaleRatio)
            .translatedBy(x: centerOffsetX, y: centerOffsetY)
        
        return adjustedPath.applying(finalTransform)
    }
}

如果你不需要等比缩放，想要直接拉伸填满整个ZStack区域，把scaleRatio的计算逻辑替换为分别计算X、Y方向的缩放比直接应用即可。