заполнить изображение на основе числа / процента цветом в js

Question

заполнить изображение на основе числа / процента цветом в js

0

Я ищу возможность заполнить изображение, основанное на процентах.

Есть ли динамический способ сделать это или проще создавать изображения за определенный интервал?

Я использую угловые и вам нужно установить процент от 1 до 5 рейтинговых систем от AJAX.

rala 22 март 2016, в 21:42

Источник

Теги:

javascript

angularjs

css

image

2 ответа

1

Просто используя два изображения и немного javascript, я уверен, что вы можете сделать это легко. Просто имейте одно изображение, прозрачное, где вы хотите, чтобы оно было заполнено. Затем поместите изображение того же размера, только что заполненного цветом заполнения, сразу за первым изображением (используйте для этого свойство css z-index) внизу. С помощью javascript переместите его, чтобы "заполнить" первое изображение. Вот ссылка на jsFiddle, демонстрирующий принцип

Это определенно не так чисто, как решение с SVG, но по крайней мере вы можете использовать его с почти любым изображением.

Loufylouf 22 март 2016, в 18:58

Ещё вопросы

shershen · Accepted Answer · 2016-03-22T19-00-00.000Z

Проверьте этот ответ: заполните процент SVG и выполните анимацию заполнения

Что вы можете сделать, так это создать SVG- форму звезды:

<svg width="100px" height="100px" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
</svg>

А затем примените линейный градиент к нему с помощью smth:

<linearGradient y2="100%" x2="100%" y1="100%" x1="0%" id="F1g">
  <stop stop-color="#00FF00" offset="0%" id="F1gst1"/>
  <stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/>
</linearGradient>

Каким-то образом этот способ быстрее внедряться и быть более гибким и менее интенсивным в сети, чем создание и отображение нескольких постепенных изображений.

Я тоже это нашел; Я попросил просто сделать, если есть способ в сочетании с javascript.
этот пост уже содержит некоторые JS