2

Ассоциация с SOEN

Как я могу регулировать длину голубой линии со 100% до 70%?

setCircleTo(70);

function setCircleTo(percent)
{
    // percent   
    // $('#test').attr('d','') 
}
#p0 {
  color: #0074c4;
  left: 60px;
  position: absolute;
  top: 72px;
}
#p100 {
  color: #0074c4;
  left: 240px;
  position: absolute;
  top: 144px;
}
<div id="p0">0%</div>
<div id="p100">100%</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <path fill="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" id="test"/>
</svg>

1

1 ответ 1

1

Самый простой способ заключается в использовании свойств stroke-dasharray.

function setCircleTo(percent)
{
    var path = $('#test').get(0);
    var pathLen = path.getTotalLength();
    var adjustedLen = percent * pathLen / 100;
    path.setAttribute('stroke-dasharray', adjustedLen+' '+pathLen);
}

Fiddle here

Ответил: Paul LeBeau

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.