autofillinkscape

Filling areas that has same number in inkscape

I want to color all the numbered areas in a picture with a specific color. For example, I want to fill everything marked with number 3 in red. Is this possible? If I need to provide more details, I'm asking about coloring a picture in the style of "paint by numbers," specifically an SVG file. I want to know if it's possible to do this.

I can select the numbers using the Ctrl+F shortcut to change their individual colors, but what I actually want is to fill the areas where the numbers are located.

This is an example file: enter image description here

    <path
   data-facetId="212"
   d="m 739.33115,788.04361 q 1.05591,0.75786 2.11182,1.51572 2.37579,-0.50524 4.75159,-1.01048 3.43171,-1.2631 6.86342,-2.52619 3.69568,-0.25262 7.39136,-0.50524 2.90376,-1.2631 5.80751,-2.52619 3.43171,-0.75786 6.86341,-1.51572 3.43171,-0.75786 6.86342,-1.51572 3.4317,-1.01047 6.86341,-2.02095 4.22364,0 8.44728,0 4.22364,0 8.44728,0 4.22364,0 8.44728,0 4.22364,0 8.44728,0 4.22364,0 8.44727,0 3.43171,1.01048 6.86342,2.02095 3.69568,0.50524 7.39137,1.01048 3.4317,0.75786 6.86341,1.51572 3.16773,1.01047 6.33546,2.02095 2.90375,1.2631 5.80751,2.52619 2.90375,1.2631 5.8075,2.5262 2.90375,1.51571 5.8075,3.03143 2.63978,1.26309 5.27955,2.52619 2.63978,1.76833 5.27955,3.53667 2.3758,1.51572 4.7516,3.03143 2.63977,1.76834 5.27955,3.53667 2.37579,1.76833 4.75159,3.53667 2.3758,1.76833 4.75159,3.53667 1.84785,2.27357 3.69569,4.54715 2.11182,2.02095 4.22364,4.0419 2.11182,2.02096 4.22364,4.04191 1.31988,1.76834 2.63977,3.53667 0,0 0,0 0,1.01048 0,2.02096 0.52796,2.52619 1.05591,5.05238 2.11182,2.27357 4.22364,4.54715 1.31989,2.52619 2.63978,5.05238 1.84784,2.52619 3.69568,5.05239 0.79193,3.28405 1.58387,6.5681 1.31988,2.77881 2.63977,5.55762 1.84784,1.76834 3.69568,3.53667 2.11182,2.52619 4.22364,5.05239 1.31989,2.52619 2.63978,5.05238 2.11182,2.02095 4.22364,4.04191 2.11182,2.27357 4.22364,4.54714 1.05591,2.77882 2.11182,5.55763 2.37579,1.76833 4.75159,3.53667 1.58387,2.77881 3.16773,5.55762 1.31989,2.52619 2.63978,5.05239 2.63977,1.26309 5.27954,2.52619 2.3758,2.27357 4.7516,4.54715 0.79193,3.28405 1.58386,6.5681 1.58387,2.27357 3.16773,4.54714 2.63978,1.51572 5.27955,3.03143 1.58387,2.5262 3.16773,5.05239 2.11182,2.02095 4.22364,4.04191 2.11182,2.02095 4.22364,4.0419 1.58387,2.77882 3.16774,5.55763 1.3199,2.77881 2.6398,5.55762 1.8478,2.02096 3.6956,4.04191 1.8479,2.52619 3.6957,5.05238 1.0559,2.77882 2.1119,5.55763 1.8478,2.27357 3.6956,4.54714 1.8479,2.5262 3.6957,5.05239 1.3199,2.77881 2.6398,5.55762 0.7919,3.28405 1.5839,6.5681 2.1118,1.76834 4.2236,3.53667 1.3199,3.03143 2.6398,6.06286 0.5279,3.78929 1.0559,7.57857 0.7919,3.0314 1.5839,6.0629 1.0559,3.0314 2.1118,6.0628 0.7919,3.2841 1.5838,6.5681 0.528,3.7893 1.0559,7.5786 -0.2639,4.0419 -0.5279,8.0838 -0.7919,3.0315 -1.5839,6.0629 -1.0559,3.284 -2.1118,6.5681 0,3.7893 0,7.5786 0,4.0419 0,8.0838 0.264,3.5367 0.528,7.0733 0.7919,2.021 1.5838,4.0419 0,0 0,0 -1.0559,0 -2.1118,0 -1.8478,-0.5052 -3.6957,-1.0104 -2.3758,-1.5158 -4.7516,-3.0315 -2.1118,-2.0209 -4.2236,-4.0419 -2.1118,-2.0209 -4.2237,-4.0419 -2.6397,-1.7683 -5.2795,-3.5367 -3.6957,-0.5052 -7.3914,-1.0104 -3.6957,-0.7579 -7.39134,-1.5158 -4.22364,0 -8.44728,0 -4.22364,0 -8.44728,0 -3.69568,0.7579 -7.39137,1.5158 -3.4317,0.7578 -6.86341,1.5157 -3.16773,1.0105 -6.33546,2.0209 -2.63977,1.7684 -5.27955,3.5367 -2.63977,1.2631 -5.27955,2.5262 -2.63977,1.7683 -5.27955,3.5367 -2.63977,1.2631 -5.27955,2.5262 -2.63977,1.7683 -5.27955,3.5366 -2.37579,1.7684 -4.75159,3.5367 -2.3758,1.5157 -4.75159,3.0314 -2.63978,1.7684 -5.27955,3.5367 -2.90376,1.0105 -5.80751,2.0209 -2.11182,2.2736 -4.22364,4.5472 -2.37579,1.7683 -4.75159,3.5367 -2.90375,1.0104 -5.80751,2.0209 -2.37579,2.021 -4.75159,4.0419 -2.63977,1.2631 -5.27955,2.5262 -2.90375,1.2631 -5.8075,2.5262 -2.90375,1.5157 -5.80751,3.0314 -2.37579,1.5158 -4.75159,3.0315 -3.16773,1.2631 -6.33546,2.5262 -2.63978,1.0104 -5.27955,2.0209 -4.22364,0 -8.44728,0 -2.63977,-1.0105 -5.27955,-2.0209 -3.16773,-1.2631 -6.33546,-2.5262 -2.11182,-1.7684 -4.22364,-3.5367 -2.37579,-1.7683 -4.75159,-3.5367 -2.90375,-1.5157 -5.8075,-3.0314 -2.11182,-1.7683 -4.22364,-3.5367 -2.63978,-1.5157 -5.27955,-3.0314 -2.63978,-1.7683 -5.27955,-3.5367 -2.11182,-1.7683 -4.22364,-3.5366 -2.63978,-1.5158 -5.27955,-3.0315 -2.3758,-2.0209 -4.7516,-4.0419 -2.90375,-1.0105 -5.8075,-2.0209 -2.3758,-2.021 -4.75159,-4.0419 -2.63978,-1.2631 -5.27955,-2.5262 -2.3758,-1.7684 -4.7516,-3.5367 -2.37579,-2.021 -4.75159,-4.0419 -2.3758,-1.5157 -4.7516,-3.0314 -2.63977,-1.5158 -5.27955,-3.0315 -2.37579,-2.0209 -4.75159,-4.0419 -2.3758,-1.5157 -4.75159,-3.0314 -2.3758,-1.7683 -4.7516,-3.5367 -2.63977,-1.7683 -5.27955,-3.5366 -2.3758,-1.5158 -4.75159,-3.0315 -2.11182,-2.0209 -4.22364,-4.0419 -2.11182,-2.0209 -4.22364,-4.0419 -2.3758,-1.7683 -4.7516,-3.5367 -2.37579,-1.7683 -4.75159,-3.5366 -2.11182,-2.021 -4.22364,-4.0419 -2.11182,-2.021 -4.22364,-4.0419 -2.11182,-2.021 -4.22364,-4.042 -2.11182,-2.0209 -4.22364,-4.0419 -2.11182,-2.0209 -4.22364,-4.0419 -1.84784,-2.2735 -3.69568,-4.5471 -1.31989,-2.5262 -2.63978,-5.0524 -1.84784,-2.5262 -3.69568,-5.05239 -2.3758,-1.76833 -4.75159,-3.53667 -2.11182,-2.02095 -4.22364,-4.04191 -1.58387,-2.52619 -3.16773,-5.05238 -2.11182,-2.02095 -4.22364,-4.04191 -1.58387,-2.27357 -3.16773,-4.54715 -1.58387,-2.52619 -3.16773,-5.05238 -1.58387,-2.77881 -3.16773,-5.55762 -1.31989,-2.5262 -2.63978,-5.05239 -0.26397,-3.53667 -0.52795,-7.07334 0,-4.04191 0,-8.08381 0,-3.78929 0,-7.57858 1.58386,-2.27357 3.16773,-4.54715 2.11182,-2.02095 4.22364,-4.04191 2.11182,-2.02095 4.22364,-4.0419 1.84784,-2.27358 3.69568,-4.54715 2.3758,-1.76834 4.7516,-3.53667 2.11182,-2.02095 4.22364,-4.04191 2.37579,-1.76833 4.75159,-3.53667 1.84784,-2.27357 3.69568,-4.54714 2.3758,-1.76834 4.7516,-3.53667 1.84784,-2.5262 3.69568,-5.05239 1.84785,-2.02095 3.69569,-4.04191 1.58386,-2.52619 3.16773,-5.05238 0.79193,-3.03143 1.58386,-6.06286 -1.58386,-2.77882 -3.16773,-5.55763 -1.84784,-2.02095 -3.69568,-4.0419 -1.84784,-2.5262 -3.69569,-5.05239 -1.58386,-2.52619 -3.16773,-5.05239 -2.63977,-1.51571 -5.27955,-3.03143 -2.11182,-2.02095 -4.22363,-4.0419 -2.63978,-1.76834 -5.27955,-3.53667 -2.11182,-1.76834 -4.22364,-3.53667 -2.11182,-3.03143 -4.22364,-6.06286 0,0 0,0 0,0 0,0 0.52795,-1.51572 1.05591,-3.03144 2.11182,-2.02095 4.22364,-4.0419 2.63977,-3.53667 5.27955,-7.07334 0,0 0,0 -1.05591,0 -2.11182,0 2.11182,-1.2631 4.22364,-2.5262 2.63977,-1.26309 5.27954,-2.52619 2.63978,-1.76833 5.27955,-3.53667 2.11182,-1.76833 4.22364,-3.53667 1.84785,-2.27357 3.69569,-4.54714 2.37579,-1.76834 4.75159,-3.53667 2.90375,-1.51572 5.80751,-3.03143 2.11182,-1.76834 4.22364,-3.53667 2.90375,-1.2631 5.8075,-2.5262 2.3758,-2.02095 4.75159,-4.0419 2.63978,-1.2631 5.27955,-2.5262 1.84785,-1.26309 3.69569,-2.52619 1.05591,0 2.11182,0 z"
   style="fill:none;stroke:#000000;stroke-width:1"
   id="path1690" />
<g
   class="label"
   transform="matrix(2.1118197,0,0,2.020954,781.01494,901.00399)"
   id="g1696">
  <svg
     width="46.554596"
     height="46.554596"
     overflow="visible"
     viewBox="-50 -50 100 100"
     preserveAspectRatio="xMidYMid"
     version="1.1"
     id="svg1694">
    <text
       font-family="Tahoma"
       font-size="50px"
       dominant-baseline="middle"
       text-anchor="middle"
       fill="#000000"
       id="text1692">2</text>
  </svg>
</g>
Solution

  • I don't think you can do this in inkscape.
    However, you could write a javaScript helper to apply color fills according to the label values.

    How it works

        const colorFills = [
      'green',
      'red',
      'orange'
    ]

    E.g paths under a label with a text content of "2" will be mapped to the 2. array value "red".

    /**
 * define colorfills for label numbers:
 * label text "1" = green, "2" = red etc.
 */
const colorFills = [
  'green',
  'red',
  'orange'
]

const svg = document.querySelector('svg')
addLabelClasses(svg);


function addLabelClasses(svg) {
  let texts = svg.querySelectorAll("text");
  let shapes = svg.querySelectorAll("path, polygon");

  // shapes must have a fill color - otherwise we can't find intersections
  shapes.forEach((el) => {
    el.style.fill = '#fff'
  });

  //console.log(paths)
  texts.forEach((text) => {
    // find center in screen units
    let {
      x,
      y,
      width,
      height
    } = text.getBoundingClientRect();
    let cx = x + width / 2;
    let cy = y + height / 2;

    // get elements in this point
    let elsUnder = document.elementsFromPoint(x, y)
    // filter paths and polygons
    let shapeUnderLabel = elsUnder.filter(el => {
      return el.nodeName === 'path' || el.nodeName === 'polygon'
    })[0];
    if (shapeUnderLabel) {
      // get color index from text content
      let colorIndex = parseInt(text.textContent) - 1;
      // apply fill
      shapeUnderLabel.style.fill = colorFills[colorIndex] ? colorFills[colorIndex] : '#ccc';
    }
  });

  // show output
  svgOut.value = new XMLSerializer().serializeToString(svg)


}
    svg{
height:90vmin;
width:auto;
}


textarea {
  width: 100%;
  min-height: 20em;
}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M26.88,7.872c-10.985,4.19-13.363,9.06-13.363,9.06l-3.058,14.043
        l1.133,23.103L31.07,69.027l31.257,7.475l25.708-8.607l5.775-23.782L81.354,15.573c0,0-12.006-8.833-12.798-8.833
        S43.301,7.759,42.961,7.985S26.88,7.872,26.88,7.872z"/>
    <path d="M47.944,26.105L36.167,36.751l8.947,16.534l15.289,8.721
        l9.286-9.739c0,0-4.982-11.439-5.436-11.439s-6.003-12.91-6.003-12.91L47.944,26.105z"/>
    <polygon points="80.334,7.532 70.821,15.799 71.84,31.202 81.807,40.941 
        93.811,31.088 94.604,19.084     "/>
    <polygon points="19.745,44.056 5.136,56.796 11.478,75.029 28.805,78.2 
        42.169,66.196 30.73,50  "/>

    <text transform="matrix(1 0 0 1 18.3096 65.542)" font-size="12">2</text>
    <text transform="matrix(1 0 0 1 79.6348 27.1499)" font-size="12">2</text>
    <text transform="matrix(1 0 0 1 49.8491 47.082)" font-size="12">3</text>
    <text transform="matrix(1 0 0 1 24.1987 26.1304)" font-size="12">1</text>
</svg>

<h3>SVG output</h3>
<textarea id="svgOut"></textarea>

    For testing: codepen example