Search code examples
javasvgprocessing

Path of an SVG file

How to get the attributes inside the path and edit any specific attribute. For example, if I want to change the color of that path for any selected ids. how do i write a code for that in Processing. Please provide an example if possible. I tried using getChildren() but not sure if I doing it right. This is what i tried to do

void setup() {
  size(1000, 800);
  background(255);
  noLoop();

  //loading the map and the csv file
  baseMap=loadShape("nepalmap.svg");
  ArrayList<String> names = new ArrayList();
  for (PShape ps : baseMap.getChildren()) { //get pshape from themap
    names.add(ps.getName());
  }
  
  location=loadTable("location.csv", "header");
  for (TableRow row : location.rows()) {
    String id = row.getString("district");
    float[] latlon = new float[2];
    latlon[0]=row.getFloat("Latitude"); 
    latlon[1]=row.getFloat("Longitude");
    PShape shape = baseMap.findChild(id);
    if (shape == null) {

      
       println("Unfound: " + id );

I need to be able to get the path using the district name. I will leave an example of what the path of one of the district looks like for better understanding. After finding the district i need to be change the color of the district i want.

Link to the SVG file https://1drv.ms/u/s!ArCqZlwbF3LRbomDBoJu3Qt0_hA?e=F5GAY1

Thank you

Solution

  • Based on your code the assumption is that each district is a direct child of the root SVG node. This may or may not be true for your SVG.

    If you're unsure you can use findChild() instead of getChild(). The difference is findChild will walk through the SVG hierarchy until it finds the child b y that name, if it exists.

    Note that you have two data sources: SVG and CSV. Ensure that both use the same names (key sensitive). If they don't match you findChild() may return null (well done on the the "unfound" check btw!)

    Once you have a reference to the district PShape you can try calling setFill() for example or disableStyle() which disables the SVG style and uses the most recent fill/stroke attributes you've set in Processing.