Geek asks and answers

Fill the percentage of SVG and enliven the fill

I am currently working on a project that compares status data with data from another country. One data point is a percentage of the protected land, and I want to fill in a percentage of the state corresponding to the data point. So, for example, if 25% of North Carolina is protected, then I want 25% of the state to fill up. I am currently trying to use svg and I want the padding to happen when the page loads.

Any suggestions or resources on how to do this are welcome.

An example I created in Illustrator:

NC filled in 33%

+5
source share
4 answers

Here are my two cents:

You can have a linear gradient as follows:

<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>

Then take the first stop element:

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

, , :

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

javascript. ( ), , , , .

, setInterval "1%" x , , , .

, , , .

.

+2

, Canvas... ( , , , % ).

1: Canvas

2:

3: ,

4: , , , x% , .

SVG, , , , , , , , , - , ?

, , 3D- 50 , . , SVG (feImage + feColorMatrix + feComposite), SVG. , ( ).

0

css html: http://jsfiddle.net/haohcraft/rAPN5/1/

,

  • , , . z-index:1, filled <div>.
  • filled <div> img position: absolute; width:90px; height:90px; .
  • height filled div,
0
source

The ProgressBar looks promising and easy to use: https://kimmobrunfeldt.imtqy.com/progressbar.js/

Here is a good Fiddle example: 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
0
source

More articles:


All Articles