javascript - SVG Circle 不会在 viewBox ract native 中居中

Question

我有两个 SVG 圆形元素，一个嵌套在另一个内部。最外面的圆圈（橙色）似乎没有任何填充并与 viewBox 的边框重叠。

如何将圆圈定位在内部，viewBox以便没有重叠并且圆圈不会被切断？

<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>

标签： javascriptcssreact-nativesvg