Как сделать постепенную заливку svg, хочу из svg сделать прогресс бар для плеера?

Question

У меня есть плеер, и я хочу вместо обычного статус бара сделать svg картинку из макета, но я не могу реализовать его заполнение, мне нужно чтоб исходя из %, прогрессбар закрашивался слева направо вот в такой цвет #58D181

<Svg
      width={224}
      height={35}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <Path
        stroke="#05B9F0"
        strokeWidth={2}
        d="M1 33.704V4.921M9.299 27.222V11.667M17.599 27.222V11.667M27.973 31.112V5.186M36.271 35V2.593M44.57 25.926V10.37M52.869 24.63V11.667M61.168 23.334V12.963M69.467 25.926V11.667M75.692 27.222V9.074M83.99 28.519V7.778M92.29 23.334V12.963M98.514 23.334V12.963M106.813 23.334V12.963M117.187 31.112V2.329M125.486 24.63V9.074M133.785 24.63V9.074M144.159 28.519V2.593M152.458 32.407V0M160.757 23.334V7.778M169.056 22.037V9.074M177.355 20.741v-10.37M185.655 23.334V9.074M191.879 24.63V6.481M200.177 25.926V5.185M208.477 20.741v-10.37M214.701 20.741v-10.37M223 20.741v-10.37"
      />
    </Svg>

Answer 1

Получилось не очень, но думаю допилить до нужной красоты будет не трудно.

progress {
  border-radius: 7px; 
  width: 80%;
  height: 35px;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: transparent;
  border-radius: 7px;
}
progress::-webkit-progress-value {
  background: url('data:image/svg+xml,%3Csvg%20width%3D%22224%22%20height%3D%2235%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke%3D%22%2305B9F0%22%20strokeWidth%3D%222%22%20d%3D%22M1%2033.704V4.921M9.299%2027.222V11.667M17.599%2027.222V11.667M27.973%2031.112V5.186M36.271%2035V2.593M44.57%2025.926V10.37M52.869%2024.63V11.667M61.168%2023.334V12.963M69.467%2025.926V11.667M75.692%2027.222V9.074M83.99%2028.519V7.778M92.29%2023.334V12.963M98.514%2023.334V12.963M106.813%2023.334V12.963M117.187%2031.112V2.329M125.486%2024.63V9.074M133.785%2024.63V9.074M144.159%2028.519V2.593M152.458%2032.407V0M160.757%2023.334V7.778M169.056%2022.037V9.074M177.355%2020.741v-10.37M185.655%2023.334V9.074M191.879%2024.63V6.481M200.177%2025.926V5.185M208.477%2020.741v-10.37M214.701%2020.741v-10.37M223%2020.741v-10.37%22%2F%3E%3C%2Fsvg%3E');
  border-radius: 7px;
}
progress::-moz-progress-bar {
  /* style rules */
}

<progress value="3333" max="10000">33%</progress>

Источник.

БЛОГ НА HUSL

Как сделать постепенную заливку svg, хочу из svg сделать прогресс бар для плеера?

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