var idx = 0;

​

function preload() {

  // kll manually workover SVG add 'id2' with state name ( copy from title ), id2 works here but is outside any SVG spec.

  svg = loadSVG('assets/Blank_US_Map_(states_only)_fill_id2.svg');  

  //svg = loadSVG('assets/Blank_US_Map_(states_only)_fill.svg');  // kll manually workover SVG with fill and stroke color attribute

  //svg = loadSVG('assets/Blank_US_Map_(states_only).svg');

  //svg = loadSVG('assets/test.svg');

}

​

function setup() {

  createCanvas(1000, 600, SVG);

  background(100,100,0);

  info();

  image(svg, 0, 0, 1000, 600);

  path = querySVG('path')[idx];

  path.attribute('fill', color(200, 0, 0));

  print("idx "+idx+", id= "+path.attribute('id')+", id2= "+path.attribute('id2')   );

}

​

function draw() {

  show_idx();

}

​

function show_idx() {

  fill(0);

  rect(width-400,height-20,450,20);

  fill(200);

  text("use UP DOWN key, idx: "+idx+", id= "+path.attribute('id')+", id2= "+path.attribute('id2')  ,width-395,height-5);

}

​

function info() {

  print(" https://stackoverflow.com/questions/46880175/changing-the-fill-of-an-svg-image-in-p5-js ");

  print(" https://discourse.processing.org/t/teaching-p5js-what-to-do-about-svg/14830 ");

  print(" http://zenozeng.github.io/p5.js-svg/examples/#manipulating ");

  print(" https://github.com/zenozeng/p5.js-svg ");

  print("newer p5.js version can show SVG as image: ");

  print(" see https://editor.p5js.org/kll/sketches/rcD366OUV");

}

​

function keyPressed() {

  if ((keyCode === UP_ARROW) || (keyCode === DOWN_ARROW)) {

    path.attribute('fill', color(0, 200, 0)); // reset

    path.attribute('stroke', color(200, 0, 0)); // test show reset

​

    if (keyCode === UP_ARROW) idx++;

    if (keyCode === DOWN_ARROW) idx--;

    if (idx < 0 || idx > 50) idx = 0;

    //print(idx)  // see canvas rigth down corner+", id= "+path.attribute('id') 

    path = querySVG('path')[idx];

    path.attribute('fill', color(200, 0, 0));

  }

}