Как сделать заполнение, с другой стороны, svg?

Question

[alaskafx]

Как сделать так, чтобы этот полукруг заполнялся с другой стороны ?


Чтобы посмотреть, как он заполняется сейчас: нужно подёргать первое значение strokeDasharray у класса .chart


Я хочу, чтобы он заполнятся слева направо, а не так, как сейчас - как так сделать?

Comments

[lagudal]

Не совсем понятно, что вы имеете в виду под "чтобы чтобы этот полукруг заполнялся с другой стороны".
Вы хотите анимировать этот stroke? Или расположение изменить? Если первое, то либо мотреть библиотеки на js, если надо красиво либо анимировать stroke-dashoffset.
Если просто расположение изменить - крутануть transform:rotate(тут_подходящее_числоdeg)

Answer 1

[Максим]

<svg viewBox="-500 -500 1000 1000">
  <circle r="440" class='bg'  />
  <circle r="440" class="chart" id="bg" />
</svg>

<input id="range" type="range" min="0" max="1253.811865" value="0">

svg{
  display: block;
  transform: scaleX(-1)rotate(30deg);
  max-width: 350px;
}

circle {
   stroke-width: 40;
        stroke-linecap: round;
        transform-box: fill-box;
        transform-origin: center;
  fill:none;
}
.chart{
  stroke-dasharray: 0 2763.911865234375;
     stroke: #FF9900;
}
.bg{
  stroke-dasharray: 1253.811865 2763.911865234375;
  stroke: #FFFF;
}

body{
  background-color: black
}

range.addEventListener("input", function (){
    bg.style.strokeDasharray =  `${this.value}, 2763.911865234375`; 
  })

this is demo: https://codepen.io/topicstarter/pen/eYRwRQz

Comments

[alaskafx]

Спасибо, логика на js с заполнением - у меня уже была сделана.

Просто мне нужно было повернуть этот полукруг.
Помогло: transform: scaleX(-1)

Спасибо