Как правильно сделать обводку текста с эффектом вытеснения заливки ⇐ CSS

[Anonymous]

Я пытаюсь создать компонент React, который отображает обведенный текст с прогрессивным цветом заливки на основе свойства, работающего с любым шрифтом.
Из-за ошибки с -webkit -text-stroke с определенным типом шрифтов (см. это), я выбрал решение, которое накладывает два интервала друг на друга. Один для обводки, а другой для заливки фона (на основе этого ответа).
Это код компонента, который у меня есть:

Код: Выделить всё

type StrokeFillWipeTextProps = {
text: string;
color: string;
wipeColor: string;
progress: number;
className: string;
};

export const StrokeFillWipeText = ({
text,
color,
wipeColor,
progress,
className,
}: StrokeFillWipeTextProps) => {
const wrapperStyle: React.CSSProperties = {
position: 'relative',
WebkitTextStroke: '10px black',
};

const innerStyle: React.CSSProperties = {
position: 'absolute',
left: 0,
pointerEvents: 'none',
backgroundClip: 'text',
backgroundSize: '200% 100%',
transition: 'background-position',
WebkitTextStroke: 0,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
whiteSpace: 'pre',
color: color,
backgroundPositionX: `${100 - progress}%`,
backgroundImage: `linear-gradient(to right, ${wipeColor}, ${wipeColor} 50%, ${color} 50%)`,
};

return (


{text}

{text}



);
};

Поэтому, когда прогресс равен 0, цвет шрифта должен быть цветным. Когда прогресс равен 50, первая половина текста должна быть окрашена с помощью WipeColor, а вторая половина - с цветом и так далее.
Вот снимок экрана этого компонента, обработанный три раза с прогрессом 10, 50 и 90 соответственно.


Как видите, у некоторых шрифтов и букв первая буква (и последняя) обрезается . Фактический текст выходит за пределы диапазона оболочки, как показано здесь:



Вот репродукция StackBlitz:
https://stackblitz.com/edit/vitejs-vite ... peText.tsx
Как мне заставить это работать со всеми семействами шрифтов, символами и размерами шрифтов?
Кроме того, мне нужна поддержка Progress, чтобы будьте точны. 0 означает отсутствие заливки вообще, 100 означает полную заливку вытеснения и все промежуточные значения.

Подробнее здесь: https://stackoverflow.com/questions/787 ... ill-effect