2

Есть косой прогресс бар на svg:

<svg viewBox="0 0 500 500">
  <polygon fill="red" points="100 100, 200, 80, 200 100, 100 120"/>
  <polygon fill="yellow" points="100 100, 140, 91, 140 112, 100 120"/>
</svg>

Как динамически изменить прогресc, а именно координаты желтого прогресс бара относительно красного ? Если у прогресса 100%, то желтый занимает всю ширину и тд

1 ответ 1

3

Например так, при помощи сдвига clip-path:

let clip = document.querySelector('clipPath polygon');
let progress = v => clip.setAttribute('transform', `translate(${v},0)`);
addEventListener('mousemove', e => progress(e.y/innerHeight*100));
<svg viewBox="100 70 100 50" height=160px>
  <defs>
    <clipPath id="clip">
       <polygon  points="100 70 200 70 200 120 100 120"/>
    </clipPath>
  </defs>
  <polygon fill="yellow"  points="100 100 200 80 200 100 100 120"/>
  <polygon fill="red" clip-path="url(#clip)" points="100 100 200 80 200 100 100 120"/>
</svg>

6
  • все супер, только такой вопрос, как узнать в js ширину полигона внутри clipPath, т.е. эти самые 100px ?
    – Amandi
    26 окт 2019 в 8:41
  • @Amandi а зачем? 26 окт 2019 в 8:50
  • чтобы изменить логику отображения под проценты, например так, jsfiddle.net/7uk18vmp
    – Amandi
    26 окт 2019 в 9:25
  • @Amandi так то тут и так проценты =) 26 окт 2019 в 14:51
  • да :) но это вообще возможно, чтобы знать ширину внутри js ?
    – Amandi
    26 окт 2019 в 15:14

Ваш ответ

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

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