带有圆角末端的 SVG 路径

Question

我正在尝试使用react-native-svg在React Native中创建一个填充的椭圆图，直观地指示百分比。填充部分应该有圆形末端，但我正在努力使位置和形状正确。这是我当前的代码：

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%）： 在此输入图片描述

Answer 1

您使用的路径是形状的轮廓。这使得合作变得更加困难。

使用简单的路径并为路径创建笔划。属性

pathLength

可用于定义路径的长度 - 这里的值 100，与 100% 匹配。

document.forms.form01.addEventListener('change', e => {
  document.getElementById('gauge')
    .setAttribute('stroke-dasharray', `${e.target.value} 100`);
});

<form name="form01">
  <lable>Value: <input name="blue" type="range"
    min="0" step="1" max="100" value="40" /></lable>
</form>
<svg width="300" viewBox="0 0 100 50">
  <defs>
    <path id="p1" d="M 10 40 a 41 41 0 0 1 80 0"
      fill="none" stroke-width="14" stroke-linecap="round"
      pathLength="100" />
  </defs>
  <use href="#p1" stroke="LightBlue" />
  <use id="gauge" href="#p1" stroke="CornflowerBlue"
    stroke-dasharray="40 100" />
</svg>