0

Fairly new to the community, so apologize for any slip ups in terms of community guidelines and question-posting etiquette.

This is a follow up for the the following question

I wrote a quick and dirty script that cleans a populated SVG. For instance, the script was given this input and the following output was achieved. All good up till this point.

enter image description here

I was now hoping that there must be a mapping where the SVG segment (representing a parliamentary seat) is mapped to the number written inside the segment. I could leverage that mapping to color the segment/constituency as per the data.

To make things a bit more clear, For example I want to color the SVG segment labelled 51 to blue. But skimming through the text representation of the SVG file, I could find no such mapping between the text 51 and the SVG polygon it corresponds to in the map.

In the text representation of the SVG file, there exists this snippet

<text transform="matrix(1 0 0 1 337.8572 649.1562)" font-family="'ArialMT'" font-size="14">51</text>

but I don't know how to identify which polygon segment in the text representation actually is "51" among multitudes of svg polygon elements like this

<polygon fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" points="1376.855,838.695 1376.855,841.936 
    1375.774,841.936 1375.774,843.014 1373.615,845.176 1373.615,846.254 1372.531,847.335 1372.531,848.413 1371.448,848.413 
    1367.135,848.413 1367.135,849.494 1364.976,849.494 1364.976,850.572 1363.897,850.572 1362.813,851.656 1360.656,851.656 
    1360.656,852.734 1361.735,852.734 1361.735,853.815 1361.735,857.056 1361.735,858.134 1361.735,859.215 1360.656,859.215 
    1360.656,861.377 1359.573,861.377 1359.573,860.293 1358.49,860.293 1355.255,860.293 1355.255,859.215 1349.855,859.215 
    1348.774,858.134 1345.531,858.134 1345.531,857.056 1345.531,854.894 1344.448,854.894 1344.448,853.815 1343.378,853.815 
    1342.297,853.815 1342.297,852.734 1342.297,851.656 1341.216,850.572 1341.216,849.494 1340.135,847.335 1339.054,845.176 
    1339.054,843.014 1337.976,841.936 1336.897,841.936 1334.735,840.854 1334.735,839.773 1331.49,836.536 1332.573,835.455 
    1332.573,834.377 1333.656,834.377 1333.656,833.293 1334.735,833.293 1336.897,833.293 1336.897,834.377 1337.976,834.377 
    1337.976,833.293 1337.976,832.215 1339.054,832.215 1339.054,833.293 1340.135,833.293 1340.135,834.377 1341.216,834.377 
    1341.216,833.293 1342.297,833.293 1343.378,833.293 1344.448,832.215 1346.615,832.215 1347.696,833.293 1348.774,833.293 
    1348.774,834.377 1348.774,836.536 1349.855,836.536 1350.937,836.536 1352.018,835.455 1357.406,835.455 1357.406,834.377 
    1356.339,833.293 1355.255,832.215 1354.177,828.975 1353.093,828.975 1353.093,827.894 1352.018,826.815 1353.093,825.734 
    1354.177,824.656 1355.255,824.656 1356.339,823.572 1356.339,822.494 1357.406,822.494 1358.49,821.413 1359.573,821.413 
    1359.573,820.335 1360.656,820.335 1361.735,819.254 1362.813,819.254 1362.813,820.335 1364.976,820.335 1364.976,819.254 
    1367.135,819.254 1367.135,820.335 1368.216,820.335 1368.216,821.413 1368.216,822.494 1367.135,822.494 1367.135,825.734 
    1368.216,825.734 1369.297,825.734 1370.378,826.815 1371.448,827.894 1372.531,827.894 1372.531,828.975 1374.696,828.975 
    1374.696,830.056 1375.774,830.056 1375.774,831.134 1377.937,831.134 1377.937,832.215 1377.937,834.377 1376.855,837.614 "/>
<polygon fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" points="1353.093,827.894 1353.093,828.975 
    1354.177,828.975 1355.255,832.215 1356.339,833.293 1357.406,834.377 1357.406,835.455 1356.339,835.455 1352.018,835.455 
    1350.937,836.536 1348.774,836.536 1348.774,835.455 1348.774,833.293 1347.696,833.293 1346.615,832.215 1344.448,832.215 
    1343.378,833.293 1341.216,833.293 1341.216,834.377 1340.135,834.377 1340.135,833.293 1339.054,833.293 1339.054,832.215 
    1337.976,832.215 1337.976,833.293 1337.976,834.377 1336.897,834.377 1336.897,833.293 1335.813,833.293 1333.656,833.293 
    1333.656,834.377 1332.573,834.377 1332.573,835.455 1331.49,836.536 1330.406,835.455 1329.339,834.377 1328.255,833.293 
    1327.177,832.215 1326.093,831.134 1325.018,830.056 1323.937,830.056 1322.855,828.975 1320.696,828.975 1320.696,830.056 
    1315.297,830.056 1314.216,828.975 1313.135,828.975 1313.135,827.894 1314.216,826.815 1314.216,825.734 1315.297,825.734 
    1316.378,824.656 1317.448,822.494 1317.448,821.413 1318.531,821.413 1319.615,819.254 1320.696,819.254 1321.774,817.095 
    1321.774,816.014 1322.855,814.936 1322.855,812.773 1323.937,811.695 1325.018,810.614 1326.093,809.536 1327.177,809.536 
    1328.255,808.455 1328.255,806.293 1327.177,805.215 1326.093,804.134 1329.339,804.134 1330.406,803.056 1330.406,801.975 
    1331.49,801.975 1332.573,800.894 1332.573,799.815 1333.656,799.815 1334.735,799.815 1334.735,798.734 1334.735,797.656 
    1335.813,797.656 1336.897,797.656 1336.897,798.734 1336.897,799.815 1337.976,799.815 1342.297,799.815 1342.297,798.734 
    1346.615,798.734 1346.615,797.656 1347.696,797.656 1347.696,796.572 1348.774,796.572 1348.774,795.494 1349.855,795.494 
    1349.855,796.572 1354.177,796.572 1354.177,797.656 1355.255,796.572 1356.339,796.572 1356.339,795.494 1357.406,795.494 
    1357.406,794.413 1360.656,794.413 1360.656,793.335 1363.897,793.335 1363.897,794.413 1364.976,797.656 1366.054,798.734 
    1364.976,798.734 1362.813,799.815 1361.735,799.815 1358.49,800.894 1354.177,801.975 1352.018,803.056 1353.093,805.215 
    1353.093,807.377 1354.177,809.536 1355.255,811.695 1355.255,813.854 1356.339,814.936 1357.406,816.014 1358.49,818.176 
    1359.573,820.335 1359.573,821.413 1358.49,821.413 1357.406,822.494 1356.339,822.494 1356.339,823.572 1355.255,824.656 
    1354.177,824.656 1353.093,825.734 1352.018,826.815 "/>

EDIT : On further research it seems that the transform matrix operation for the text segment is the coordinates for the text to be placed at. In that case, the question boils down to how to identify which polygon/polyline does a given point fall under

2
  • This isn't a design question: it's an implementation question. If you look up "Point in polygon analysis" you'll find help. It will ideally need a database (and a spatially-enabled database will simply give you the right answer). Apr 6 '21 at 10:35
  • Doing this programmatically is non-trivial. If all you're doing is mapping this one SVG I would recommend doing it by hand. Apr 6 '21 at 12:31
1

Well, this isnt at all a simple problem. The manual way which takes considerably less time than a hour, which would also have done the first step for free, is as follows:

  1. Open in inkscape or illustrator
  2. For each area:
    • select text and polygon, and group it (hit ctrl+g; same in all apps)
  3. Save

Text and polygon is not next to eachother in a shared group.

Could this be automated. Yes. Its a bit nontrivial as you need to make a acceleration structure for the querry. The easy way to do a am i inside querry is shoot a ray to the side and count intersections. If number is odd your inside ignoring glancing and direct vertex hits.

enter image description here

Image 1: A image showing method answer i made to the sameish question elsewhere on stackexthange network.

But see SVG does not offer high level access to the data. Not a big deal but considerably bigger investment than a hour.

PS: Alternatively load the GIS data from your government and export that. Its far simpler.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.