SVG Circle | Линейный градиент для круга с динамическим заполнением

Question

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <defs>
        <linearGradient id="gradient" x1="0" x2="100%" y1="0" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#ec0143" />
            <stop offset="1" stop-color="#ff6d6d" />
        </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="45" fill="none" stroke="#000" stroke-width="9" />
    <circle cx="50" cy="50" r="45" fill="none" stroke-width="9" stroke-dasharray="282.2865905761719" stroke-dashoffset="200" stroke-linecap="round" stroke="url(#gradient)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="url(#gradient)"/>
</svg>

Имеются два круга, один задается как фон, второй задается как показатель заполненности, проблема в том, что при использовании градиента, он независимо от stroke-dashoffset заполняет градиент на весь объем фигуры, а не на ту часть, которая нужна.

То есть нужен градиент на ту часть, которая отрисована, кусочек круга если быть точнее.

Второй вектор показывает, что градиент заполняет полностью объем и создан как пример.

Как добиться заполнение объема фигуры градиентом только на определенном кусочке который задается с помощью strok-dashoffset ?

БЛОГ НА HUSL

SVG Circle | Линейный градиент для круга с динамическим заполнением

Ответы (0 шт):