Databases
StackOverflow2013
Postsdbo
POInkscape highlight different parts of a svg and manipulate the svg map in html
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInkscape highlight different parts of a svg and manipulate the svg map in html
    primarykey
    data
    text
    <p>Scenario : Want to provide rich graphical charts on a map of a particular city. Since I could not find the official svg version map for that city, I decided to try it myself.</p> <p>I was able to get the official pdf map of the city and converted it to svg using inkscape. I want to be able to manipulate the map at district level. Using inkscape i can demarcate the boundaries of the districts further into sub-districts that I want to work on. I would then want to manipulate or work on these sub-districts.</p> <p>The district levels are paths (in inkscape terminology).</p> <p>a) In Inkscape, after choosing the edit nodes by path option , how can i split up the individual regions (districts further) so that they appear as paths. I was not able to achieve this split-up.</p> <p><img src="https://i.stack.imgur.com/ZtJAn.png" alt="sub-district demarcation required here"></p> <p>b) Given the svg, i then imported it to an html. How can i manipulate the svg dom for particular parts of that map ( like if i were to click on the sub-disctrict in a) be able to fetch the data for that region). Is this possible ? to manipulate different parts of the svg, if so hints/pointers on how to go about it will be appreciated.</p> <p>Thanks!</p> <p>PS: to the downvoter please explain your downvote.</p> <p>EDIT : Adding information regarding research. It turns out after I had gone over to the other-side and played around with jvectormap and gotten what i need and came back to look at this ; the mistake that I had done was onClick() vs onclick() ( ..argh ). In any case adding the details here to show that it does work however I was not able to adjust the dimensions of the image and an alternative to the solution I will post below. PS: My experience with SVG is 2 days so based on my learning on manipulating images from my other solution i have the right svg in place. Perhaps @robert-longson could explain what is the difference between the svg output from inkscape vs that from <a href="https://code.google.com/p/svg-edit/" rel="nofollow noreferrer">svg-edit</a>. </p> <p>Pre-conditions : </p> <ol> <li>Convert pdf to svg using inkscape</li> <li>Select the nodes, break apart to convert text to paths (i did not do this before).</li> </ol> <p>This is mostly for part b) I added an onclick event and painted the region i was interested in red. So if I were to load the svg from the browser as is (and load jquery) then the on clicking the selected region it works as expected.</p> <p><img src="https://i.stack.imgur.com/PNA0O.png" alt="SVG loaded from browser"></p> <p>Now if I were to load the svg as an image it does not work (which is where i gave up because i did not have my districts in the first place and there was no access to the svg dom ..duh!). The correct way it seems is to load it using the object tag.</p> <p>Now if i were to try to load the image via html using the object tag it works. <img src="https://i.stack.imgur.com/IbIuS.png" alt="enter image description here"></p> <p>However I am unable to adjust the dimensions of the image even after adjusting it in the svg tags or as suggested <a href="https://stackoverflow.com/questions/644896/how-do-i-scale-a-stubborn-svg-embedded-with-the-object-tag">here</a></p> <p>I have for now branched off to my other solution mostly because the highlighting of regions functionality is available in the excellent <a href="http://jvectormap.com/" rel="nofollow noreferrer">jvectormap</a> library.</p> <p>EDIT : This <a href="https://gist.github.com/anshumania/7095074" rel="nofollow noreferrer">gist</a> shows a svg made using inkscape. Open the same file in svg-editor and then look at the source ; there is some sort of conversion on the "path data" : the d attribute of path. And it is this converted output which finally works well in the svgto.jvectormap.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USsunny
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POInkscape highlight different parts of a svg and manipulate the svg map in html
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POInkscape highlight different parts of a svg and manipulate the svg map in html
      1. This table or related slice is empty.
      1. VTUpMod
    1. COFor point a) it depends from the kind of import made by Inkscape, for a similar case I'd to duplicate the regions and made "collages" of the paths until the contour was completed; for point b) see a similar [question](http://stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap)
      singulars
      1. POInkscape highlight different parts of a svg and manipulate the svg map in html
      1. USPaolo Gibellini
    2. COWhy downvote ? Please explain.
      singulars
      1. POInkscape highlight different parts of a svg and manipulate the svg map in html
      1. USsunny
    3. COa) would seems to be about how to use Inkscape which belongs on Super User rather than here. b) does not show any research effort. How have you tried to manipulate the DOM, what issues/problems did you encounter?
      singulars
      1. POInkscape highlight different parts of a svg and manipulate the svg map in html
      1. USRobert Longson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload