Skip to main content
.scaleEffect(scale: number): Component
.scaleEffect(props: { x?: number; y?: number; anchor?: UnitPoint }): Component
​
scale
number
A uniform scale factor applied to both axes. 1 is the original size, 0.5 is half size, 2 is double size.
​
props
object

​
Support

​
Usage

​
Uniform scale

Text("Small")
    .scaleEffect(0.5)

​
Per-axis scale

Rectangle()
    .frame({ width: 100, height: 100 })
    .foregroundStyle(Color("blue"))
    .scaleEffect({ x: 1.5, y: 0.75 })

​
Scale from a corner

Text("Grow")
    .scaleEffect({ x: 2, y: 2, anchor: "topLeading" })

​
Interactive scale

const body = () => {
    const [enlarged, setEnlarged] = useState(false)
    return Image({ systemName: "star.fill" })
        .font("largeTitle")
        .scaleEffect(enlarged ? 1.5 : 1)
        .onTapGesture(() => setEnlarged(!enlarged))
}

​
Notes

  • Scaling does not affect the component’s layout frame. The component’s original space is preserved, and the scaled content may overlap neighboring components.