React Native中react-native-svg实现带圆角端点的百分比填充椭圆问题

我尝试在React Native中使用react-native-svg创建一个可视化展示百分比的填充椭圆图表，填充部分需要带有圆角端点，但目前无法正确设置其位置和形状。

以下是我的当前代码：

import React from 'react';
import {
  Svg,
  Path,
  Defs,
  LinearGradient,
  Stop,
  ClipPath,
} from 'react-native-svg';
import {colors} from '../../../constants/colors';

interface FilledEllipseGraphProps {
  percentage: number;
}

const FilledEllipseGraph: React.FC<FilledEllipseGraphProps> = ({
  percentage,
}) => {
  const normalizedPercentage = Math.max(0, Math.min(percentage, 100));
  const stopOffset = normalizedPercentage / 100;

  return (
    <Svg width="259" height="130" viewBox="0 0 259 130">
      <Defs>
        <ClipPath id="clip-path">
          <Path d="M241.629 130C251.499 130 259.626 121.962 258.274 112.185C256.759 101.239 253.852 90.5055 249.604 80.2512C243.071 64.4788 233.495 50.1477 221.424 38.0761C209.352 26.0045 195.021 16.4288 179.249 9.89566C163.477 3.36255 146.572 -7.46234e-07 129.5 0C112.428 7.46234e-07 95.5235 3.36255 79.7511 9.89566C63.9788 16.4288 49.6477 26.0045 37.5761 38.0761C25.5045 50.1477 15.9288 64.4788 9.39566 80.2512C5.14816 90.5055 2.24084 101.239 0.726457 112.185C-0.62612 121.962 7.50119 130 17.3712 130C27.2411 130 35.0713 121.929 36.9314 112.236C38.1322 105.978 39.9673 99.8439 42.4173 93.9292C47.1541 82.4933 54.0971 72.1024 62.8498 63.3498C71.6024 54.5971 81.9933 47.6542 93.4291 42.9173C104.865 38.1804 117.122 35.7423 129.5 35.7423C141.878 35.7423 154.135 38.1804 165.571 42.9173C177.007 47.6541 187.398 54.5971 196.15 63.3498C204.903 72.1024 211.846 82.4933 216.583 93.9291C219.033 99.8439 220.868 105.978 222.069 112.236C223.929 121.929 231.759 130 241.629 130Z" />
        </ClipPath>
        <LinearGradient id="gradient-fill" x1="0%" y1="0%" x2="100%" y2="0%">
          <Stop
            offset={stopOffset}
            stopColor={colors.background.primaryBlue}
            stopOpacity="1"
          />
          <Stop
            offset={stopOffset}
            stopColor={colors.background.primaryBlue}
            stopOpacity="0.3"
          />
        </LinearGradient>
      </Defs>
      <Path
        d="M241.629 130C251.499 130 259.626 121.962 258.274 112.185C256.759 101.239 253.852 90.5055 249.604 80.2512C243.071 64.4788 233.495 50.1477 221.424 38.0761C209.352 26.0045 195.021 16.4288 179.249 9.89566C163.477 3.36255 146.572 -7.46234e-07 129.5 0C112.428 7.46234e-07 95.5235 3.36255 79.7511 9.89566C63.9788 16.4288 49.6477 26.0045 37.5761 38.0761C25.5045 50.1477 15.9288 64.4788 9.39566 80.2512C5.14816 90.5055 2.24084 101.239 0.726457 112.185C-0.62612 121.962 7.50119 130 17.3712 130C27.2411 130 35.0713 121.929 36.9314 112.236C38.1322 105.978 39.9673 99.8439 42.4173 93.9292C47.1541 82.4933 54.0971 72.1024 62.8498 63.3498C71.6024 54.5971 81.9933 47.6542 93.4291 42.9173C104.865 38.1804 117.122 35.7423 129.5 35.7423C141.878 35.7423 154.135 38.1804 165.571 42.9173C177.007 47.6541 187.398 54.5971 196.15 63.3498C204.903 72.1024 211.846 82.4933 216.583 93.9291C219.033 99.8439 220.868 105.978 222.069 112.236C223.929 121.929 231.759 130 241.629 130Z"
        fill="url(#gradient-fill)"
        clipPath="url(#clip-path)"
      />
    </Svg>
  );
};

export default FilledEllipseGraph;

效果对比 #

• 预期效果（85%）：
• 当前实际效果（50%）：

内容的提问来源于stack exchange，提问作者Ido Aviram