Заливка процентной области в пользовательском (custom) овальном изображении SVG
Я хотел бы заполнить пользовательский SVG до определенного процента.
Вот мой начальный SVG
<svg width="202" height="195" viewBox="0 0 202 195" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" d="M96.8166 4.06964C16.0794 8.40606 -20.4645 94.8546 20.2957 157.019C54.6867 204.16 143.361 202.123 184.273 150.807C226.464 97.5789 163.505 0.38025 96.8166 4.06964Z" stroke="#313848" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>Предположим, есть прогресс на x%, поэтому я хотел бы заполнить этот SVG примерно так:
<svg width="207" height="203" viewBox="0 0 207 203" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.1" d="M99.8166 12.0696C19.0794 16.4061 -17.4645 102.855 23.2957 165.019C57.6867 212.16 146.361 210.123 187.273 158.807C229.464 105.579 166.505 8.38025 99.8166 12.0696Z" stroke="#313848" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M99.8142 12.0736C166.502 8.38527 229.463 105.585 187.273 158.812" stroke="#EA7052" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M96.1683 2.4287C88.1789 2.85671 84.5529 11.2658 88.579 17.3074C91.9765 21.8887 100.751 21.6836 104.805 16.6905C108.986 11.5113 102.768 2.06471 96.1683 2.4287Z" fill="#EDEDEE" stroke="#EA7052" stroke-width="4.76054" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M171.545 162.236C169.583 169.548 177.007 175.33 184.329 173.522C189.985 171.84 192.408 163.889 188.57 158.747C184.582 153.434 173.156 156.193 171.545 162.236Z" fill="#EDEDEE" stroke="#EA7052" stroke-width="4.76054" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>Я не могу понять, как этого добиться. Я хочу, чтобы он был динамичным, чтобы я мог получать любой процент. Кроме того, мне нужно анимировать его от начальной до конечной точки круговым движением.
Свободный перевод вопроса Fill Percentage area in a custom Oval SVG image от участника @Nimish Gupta.
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
Вы можете рассчитать длину пути с помощью метода getTotalLength(). Это составляет 100%.
Затем вы можете получить длину, представляющую x% (xperc в коде).
Теперь вы можете использовать stroke-dasharray для представления частичного пути.
Вы можете рассчитать положение последней точки с помощью метода getPointAtLength ().
Пожалуйста, прочтите комментарии в моем коде.
//желаемый процент
let xperc = .35;
//the total length of the path
let tl = base.getTotalLength();
//частичная длина при заданном проценте xperc
let partial = tl * xperc;
//установить `stroke-dasharray` второго элемента использования
perc.setAttribute("stroke-dasharray", `${partial} ${tl -partial}`)
//вычислить положение точки, обозначающей конечное положение
let theEnd = base.getPointAtLength(partial);
// установить атрибуты cx и cy для конечной точки
end.setAttribute("cx", theEnd.x);
end.setAttribute("cy", theEnd.y); circle {
stroke: red;
fill:white;
stroke-width: 6.87634;
}<svg width="207" height="203" viewBox="0 0 207 203" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="base" d="M99.8166,12.0696L99.8166,12.0696C166.505,8.38025 229.464,105.579 187.273,158.807C146.361,210.123 57.6867,212.16 23.2957,165.019C-17.4645,102.855 19.0794,16.4061 99.8166,12.0696Z" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</defs>
<use xlink:href="#base" stroke="silver" />
<use xlink:href="#base" stroke="red" id="perc" />
<circle cx="99.8166" cy="12.0696" r="10" />
<circle id="end" r="10" />
</svg>ПРИМЕЧАНИЕ: так как ваш путь идет против часовой стрелки, мне пришлось изменить его, чтобы получить желаемый результат
А это пример, в котором я использую диапазон input type range для изменения процентного значения:
let xperc = itr.value;
onInput();
itr.addEventListener("input", onInput)
function onInput() {
xperc = itr.value;
let tl = base.getTotalLength();
let partial = tl * xperc;
perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`);
let theEnd = base.getPointAtLength(partial);
end.setAttribute("cx", theEnd.x);
end.setAttribute("cy", theEnd.y);
}circle {
stroke: red;
fill:white;
stroke-width: 6.87634;
}<input id="itr" type="range" min="0" max="1" step=".001" value=".35" /><br>
<svg width="207" viewBox="-5 -5 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="base" d="M99.8166,12.0696L99.8166,12.0696C166.505,8.38025 229.464,105.579 187.273,158.807C146.361,210.123 57.6867,212.16 23.2957,165.019C-17.4645,102.855 19.0794,16.4061 99.8166,12.0696Z" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</defs>
<use xlink:href="#base" stroke="silver" />
<use xlink:href="#base" stroke="red" id="perc" />
<circle cx="99.8166" cy="12.0696" r="10" />
<circle id="end" r="10" />
</svg>И еще одна демонстрация, в которой я использую javascript для анимации от 0 до 1:
//the animation begins at 0
let xperc = 0;
//get the total length of the path
let tl = base.getTotalLength();
//идентификатор анимации запроса
let rid = null;
function Animation() {
rid = window.requestAnimationFrame(Animation);
// покак xperc <1 увеличивает его значение на 0,001. В противном случае анимация останавливается
if (xperc < 1) {
xperc += 0.001;
}else{window.cancelAnimationFrame(rid)}
//то же, что и в первом примере
let partial = tl * xperc;
perc.setAttribute("stroke-dasharray", `${partial} ${tl - partial}`);
let theEnd = base.getPointAtLength(partial);
end.setAttribute("cx", theEnd.x);
end.setAttribute("cy", theEnd.y);
}
Animation();circle {
stroke: red;
fill:white;
stroke-width: 6.87634;
}<svg width="207" viewBox="-5 -5 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="base" d="M99.8166,12.0696L99.8166,12.0696C166.505,8.38025 229.464,105.579 187.273,158.807C146.361,210.123 57.6867,212.16 23.2957,165.019C-17.4645,102.855 19.0794,16.4061 99.8166,12.0696Z" stroke-width="6.87634" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</defs>
<use xlink:href="#base" stroke="silver" />
<use xlink:href="#base" stroke="red" id="perc" />
<circle cx="99.8166" cy="12.0696" r="10" />
<circle id="end" r="10" />
</svg>