SwiftUI alignmentGuides inside background - ios

Question

I want to change the anchor point of the red line without affecting the whole layout.
So instead of having its horizontal anchor point .leading i want to be .center. So the center of the red line aligns with the leading of the black line.
VStack(alignment: .leading) {
Rectangle().fill(Color.Stock.gray).frame(height: 4)
.background(
GeometryReader { geo in
Rectangle().fill(Color.red).frame(width: 40, height: 8)
.alignmentGuide(HorizontalAlignment.leading) { dim in
dim[HorizontalAlignment.center]
}
},alignment: .leading)
}.padding(.horizontal, 32)
Result:
It want like this (Instead of adding it as a background i added to the VStack, but this modifies my layout to the right):

Answer 1

Updated: Xcode 13.4 / iOS 15.5
Simplified, no hardcode - only alignments:
FirstView()
.background(
SecondView()
.alignmentGuide(HorizontalAlignment.leading) { dim in
dim[HorizontalAlignment.center]
}
.alignmentGuide(VerticalAlignment.bottom) { dim in
dim[VerticalAlignment.top]
}
,alignment: .bottomLeading)
Test code is here
Original
Here is a demo of possible solution (with substituted color). Tested with Xcode 12 / iOS 14.
struct DemoView: View {
private let height = CGFloat(4)
var body: some View {
VStack(alignment: .leading) {
Rectangle().fill(Color.gray).frame(height: height)
.background(
VStack(alignment: .leading) {
Rectangle().fill(Color.red).frame(width: 40, height: 8)
.alignmentGuide(HorizontalAlignment.leading) { dim in
dim[HorizontalAlignment.center]
}
.alignmentGuide(VerticalAlignment.center) { dim in
dim[VerticalAlignment.top] - height / 2
}
},alignment: .leading)
}.padding(.horizontal, 32)
}
}