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:
<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
- query all
<text>elements in the svg - get their center coordinates by
getBoundingClientRect() - find intersecting
<path>elements usingdocument.elementsFromPoint(x, y) - apply fill colors as defined in a color array:
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
- How do I auto fill an empty value of an object in an array with an object that matches from another array in JS?
- Detecting Browser Autofill
- Excel: Transforming automatically a cell based on the input in another one
- autocomplete=new-password and making them confirm it via entering the password again
- How to create a JavaScript auto-fill script for forms in an Electron WebView that bypasses validation issues?
- Override browser form-filling and input highlighting with HTML/CSS
- Import autofill data from a file into Chrome
- Android How can I detect autofill pressed?
- How to do AutoFill in Excel with OpenXml or ClosedXml?
- Auto fill blank cells with cell value, if condition is met
- If one cell IS NOT EMPTY put text on another cell in Google Sheets
- Why is Chrome autofilling account email in wrong input element?
- How to copy values from two dataframes with datetime index, to fill one data frame?
- VBA Code for Selecting a Cell Formula and Autofilling Down
- Defining the "last row" value (on a Sheet that grows each week) and using it in the Range object
- Disable Edge Autocomplete "Last Used" in HTML form
- How can I detect a login form in a webpage using JavaScript?
- Flutter: password autofill
- VBA Excel cycle through sheets, find last row in table and autofill with data
- How to add auto fill suggestion for otp
- How set default date value to today on Strapi
- Office Scripts Autofill value for a set range
- Angular mat-form-filed input disable autocomplete
- Auto submit autofill entry on android app
- is Google Chrome <input /> Auto fill background color changed in Version 72.0?
- iOS Safari autofill not populating all address fields at once
- How to get this field to autofill - Kotak securities Neo login page nameless idless field
- How does form auto-filling in the browser work?
- Password AutoFill: WKWebView doesn't present "Save Password" alert
- Filling areas that has same number in inkscape