Tengo dos elementos circulares SVG, uno anidado dentro del otro. El círculo más externo (naranja) parece no tener ningún relleno y se superpone con el borde de viewBox.

¿Cómo puedo colocar los círculos dentro de viewBox para que no se superpongan y el círculo no se corte?

 <View style={{ alignContent: "center", alignSelf: "center" }}> <Svg height="250" width="250" viewBox="0 0 100 100" style={{ zIndex: 1, borderWidth: 1 }} > {/* OUTTER ORANGE CIRCLE */} <Circle stroke="#FF8540" fill="none" cx="50" cy="50" r={radius} strokeWidth="3" transform={`rotate(52.5 ${"50"} ${"50"})`} strokeDasharray={[dash, circumference - dash]} strokeLinecap="round" style={{ transition: "all 0.5s" }} /> {/* INNER TEAL CIRCLE */} <Circle stroke="#1AA39B" fill="none" cx="50" cy="50" r={radius * 0.8} strokeWidth="3" transform={`rotate(-152.5 ${"50"} ${"50"})`} strokeDasharray={[dash, circumference - dash]} strokeLinecap="round" style={{ transition: "all 0.5s" }} /> </Svg> </View>