SVG-путь с закругленными концами ⇐ CSS

[Anonymous]

Я пытаюсь создать заполненный эллипс в 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 = ({
percentage,
}) => {
const normalizedPercentage = Math.max(0, Math.min(percentage, 100));
const stopOffset = normalizedPercentage / 100;

return (












);
};

export default FilledEllipseGraph;

Вот как это должно выглядеть (85%):
введите сюда описание изображения
И это мой текущий результат (50% ):
введите здесь описание изображения

Подробнее здесь: https://stackoverflow.com/questions/786 ... unded-ends