Geek Answers Handbook

Inkscape highlights various parts of svg and manipulates svg card in html

Scenario: want to provide rich graphics cards on a map of a specific city. Since I could not find the official version of the svg version for this city, I decided to try it myself.

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 the district level. Using inkscape, I can delimit the boundaries of the districts further into the subareas that I want to work on. Then I would like to manipulate or work on these subareas.

County levels are paths (in inkscape terminology).

a) In Inkscape, after choosing the option to edit nodes along the path, how can I separate the individual areas (areas further) so that they appear as paths. I could not achieve this separation.

sub-district demarcation required here

b) Given svg, I imported it into html. How can I manipulate svg dom for certain parts of this map (for example, if I clicked on sub-disctrict in a) to be able to extract data for this region). Is it possible? for manipulating the various parts of svg, if so hints / pointers on how to do this will be appreciated.

Thanks!

PS: to downvoter, please explain your lower position.

EDIT: , . , , jvectormap , , , ; , , onClick() vs onclick() (..argh). , , , , , . PS: SVG 2 , , , svg. , @robert-longson , svg inkscape svg-edit.

:

  • pdf svg inkscape
  • , , ( ).

b) onclick , . , svg , ( jquery), .

SVG loaded from browser

, svg , ( , , svg dom..duh!), - .

, html, , . enter image description here

svg

, jvectormap.

EDIT: gist svg, inkscape. svg-, ; " ": d . , svgto.jvectormap.

+4
2

, , :

  • SVG PDF Inkscape
  • , svg.
  • ( ) , Inkscape.
  • svg svg-edit tool
  • svg 4), svg jvectormap

  • jvectormap html.

    ...

    • .

, @RobertLongson , svg inkscape svg-edit.

+3

Angular/JS, Typescript inskscape svg. , Inkscape, Object Properties ( id!, ). svg - , :)

this.mySvg = svg.getElementsByTagName("svg")[0];
let myDom = this.mySvg.getElementsByTagName("*");
    for(let i=0; i < myDom.length; i++) {
      let label = myDom[i].getAttribute('inkscape:label');
      let style = myDom[i].getAttribute('style');
      if (label && style) {
           myDom[i].addEventListener("click", () => this.onClick(myDom[i], style));
      }
    }
0

More articles:


All Articles