1

В общем мне желательно сделать часть круга, размер которой можно будет редактировать в % и при натяжке не было проблем. Т.е. зависимость заполнения круга от %. Зависимость процента заполнения круга Я лишь смог сделать полукруг:

<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
  width="400" height="400">
<g transform="rotate(-90 150 150)">      
<circle id="fon" cx="150" cy="150" r="100" stroke="#673E93" stroke-width="5"   stroke-dasharray ="314 " stroke-dashoffset="314" fill="none" /> 
</g> 
</svg>

Буду благодарен за помощь!

1 ответ 1

4

Как-то так?

let value = Math.random()*100;
text.innerHTML = value.toFixed(0) + '%'
fon.setAttribute('stroke-dasharray', 2*Math.PI*value + ' 1000' )
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <g transform="rotate(-90 150 150)">      
    <circle id="fon" cx="150" cy="150" r="100" 
      stroke="#673E93" stroke-width="5" fill="none" /> 
  </g>
  <text x="150" y="150" fill=#673E93 id=text font-size=50 
    text-anchor=middle dominant-baseline=central ></text>
</svg>

5
  • Код JS классный! 14 дек 2019 в 5:24
  • Спасибо, я немного изменил под себя код, благодарю за решение)
    – Vashka
    14 дек 2019 в 14:57
  • @Stranger in the Q Может посмотришь вопрос и примешь участие в решении? 15 дек 2019 в 7:41
  • 1
    @Alexandr_TT заплюсовал, буду у компа - гляну 15 дек 2019 в 7:48
  • 1
    @Stranger in the Q Благодарю. Решение любое, интересует более короткий и оптимальный код, как ты умеешь 15 дек 2019 в 7:49

Ваш ответ

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

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