React Native中SVG Circle元素在viewBox内被裁切、无法居中问题问询

SVG的描边（stroke）默认是居中绘制在图形路径上的，你的外层橙色圆形的半径 + 1/2描边宽度总和超过了当前viewBox的边界，就会发生裁切。当前viewBox设置为0 0 100 100，画布中心在(50,50)，单方向最大可用长度为50，假设你设置的radius值为49，加上1.5的描边半宽，总占用半径为50.5，超出画布边界0.5个单位，就会出现边缘被裁切的情况。

• 方案1：调整viewBox预留内边距（推荐，无需修改圆形位置和半径参数）
  把Svg标签的viewBox属性从0 0 100 100修改为-3 -3 106 106即可。viewBox的四个参数分别为「画布起始X坐标、画布起始Y坐标、画布宽度、画布高度」，这个修改相当于把可视区域往左上偏移3个单位，宽高各扩大6个单位，四周都预留了3个单位的边距，刚好可以容纳3px宽度的描边不被裁切。如果需要更宽松的余量，可以把偏移值和扩充值再调大1-2。
• 方案2：缩小圆形半径适配现有viewBox
  保持viewBox不变，把外层圆形的最大半径限制为 50 - 描边宽度/2，比如当前描边宽度为3，外层radius值最大设为48.5即可，内层圆形半径按比例同步缩小即可。

<View style={{ alignContent: "center", alignSelf: "center" }}>
  <Svg
    height="250"
    width="250"
    viewBox="-3 -3 106 106"
    style={{ zIndex: 1, borderWidth: 1 }}
  >
    {/* 外层橙色圆形 */}
    <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" }}
    />
    {/* 内层青色圆形 */}
    <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>

提示：如果你使用了strokeLinecap="round"属性，虚线端点会向外突出1个描边半宽的距离，建议预留边距时多留1-2个单位，避免端点被裁切。

内容的提问来源于stack exchange，提问作者Matt Laszcz