Заполнить процент SVG и оживить заполнение

Question

В настоящее время я работаю над проектом, который сравнивает данные состояния с данными из другой страны. Одна точка данных - это процент от охраняемой земли, и я хочу заполнить процент от состояния, соответствующего точке данных. Так, например, если 25% Северной Каролины защищены, то я хочу, чтобы 25% штата заполнилось. В настоящее время я пытаюсь использовать svg, и я хочу, чтобы заполнение происходило при загрузке страницы.

Любые предложения или ресурсы о том, как это сделать, будут очень признательны.

Пример я составил в Illustrator:

Answer 1

Ну вот довольно тупой способ Canvas ... (и я предполагаю, что вы имеете в виду вы хотите определенный% от внутренней области, заполненной) ,

Шаг 1: дамп сплошного изображения каждого состояния в Canvas

Шаг 2: Подсчитайте число ненулевых пикселей

Шага 3: Извлечение краев с использованием краем экстракции свертки

Шаг 4 : Для каждой строки, итерируйте по горизонтали внутри каждой строки в форме, окрашивая в пиксели, пока не достигнете x% формы, которую вы хотите изобразить.

Это можно сделать в SVG, но вам нужно будет вручную отрегулировать фигуру, отследить все ваши области, а затем вручную вычислить те, которые нужно заполнить, и она не будет делать то, что, как я думаю, вы хотите - что должно ли государство заполняться, как это есть контейнер для воды?

Альтернативное решение - это, конечно же, трехмерные прозрачные контейнеры в форме всех 50 состояний, заполняющие их цветной водой до желаемых уровней. Фотографируйте их, а затем манипулируйте этим изображением через фильтр SVG (feImage + feColorMatrix + feComposite), чтобы выборочно заполнить изображение SVG. Это может быть быстрее, чем изучение тесселяции (или холста).

Answer 2

Вот мои два цента:

Вы можете иметь линейный градиент, как это:

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

Затем сделать первый стоп элемент:

var firstStop = document.getElementById('F1gst1'); 

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

percentage = '35%'; firstStop.setAttribute('offset',percentage); 

И вот в javascript. Вам нужен градиент для каждого состояния (вы можете использовать группу), и, возможно, вам нужно будет определить объект пути с заполнением внутри каждого состояния с той же формой, чтобы вы могли применить линейный градиент к этому атрибуту заполнения пути.

Если вам нужна анимация, вы можете установить setInterval и добавить «1%» каждые x миллисекунд, чтобы сделать эффект, и остановить каждый интервал, когда достигнут желаемый процент.

Я надеюсь, что это, по крайней мере, дало вам ключ.

С уважением.

Answer 3

Это можно сделать с помощью простого CSS и HTML: http://jsfiddle.net/haohcraft/rAPN5/1/

В основном, уловка

1. Вам нужен образ, который имеет прозрачную внутреннюю область, но непрозрачную внешнее поле, как и образ в скрипке. А вам необходимо установить z-index:1, чтобы разместить его выше filled <div>.
2. Установите filled <div> и img будет position: absolute; width:90px; height:90px; в этом случае.
3. Затем вы можете настроить height в filled div, чтобы показать в процентах

Answer 4

ProgressBar выглядит многообещающим и простой в использовании: https://kimmobrunfeldt.github.io/progressbar.js/

Вот хороший Fiddle пример: https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

Javascript:

// progressbar.js@1.0.0 version is used 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 

var bar = new ProgressBar.Circle(container, { 
    color: '#aaa', 
    // This has to be the same size as the maximum width to 
    // prevent clipping 
    strokeWidth: 4, 
    trailWidth: 1, 
    easing: 'easeInOut', 
    duration: 1400, 
    text: { 
    autoStyleContainer: false 
    }, 
    from: { color: '#aaa', width: 1 }, 
    to: { color: '#333', width: 4 }, 
    // Set default step function for all animate calls 
    step: function(state, circle) { 
    circle.path.setAttribute('stroke', state.color); 
    circle.path.setAttribute('stroke-width', state.width); 

    var value = Math.round(circle.value() * 100); 
    if (value === 0) { 
     circle.setText(''); 
    } else { 
     circle.setText(value); 
    } 

    } 
}); 
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif'; 
bar.text.style.fontSize = '2rem'; 

bar.animate(1.0); // Number from 0.0 to 1.0