How does this work?
- Basically loads an SVG into an HTML page
- The SVG is made zoomable and draggable using svg-pan-zoom.js
- Library applies a transformation matrix on the svg based on the cursor events
- Layer support depends on inkscape layer tagging (not part of SVG standard)
- Javascript code search for inkscape layer tags and extracts the required information
- Hiding layers is iplemented using CSS ("display: none")
- room-support depends on class=room attribute being added to the SVG object
- see section "Add class attribute in inkscape"
- the area is calculated using
Features
Layer Selection
- JS-Code extracts information about inkscape layers from the SVG file
- (layers are not part of the SVG standard)
- Hiding layers is implemented using CSS ("display: none")
Room Selection
- Rooms are marked by adding a "class=room" attribute to the room's path element
- Area is calculated using the simple Algorithm described in the Wikipedia for Polygon
- Thus the room path may not intersect with itself
Power Icons
- Requires getIntersectionList()
- Power Icons are interpreted if "class=receptacle" or "class=room-lighting" is set
Power Cables
- Requires getIntersectionList()
- Power Cables are interpreted if "class=NYM-J-3x1.5" or "class=NYM-J-5x6" is set
- Length calculation only works if no bezier elements are part of the path
Notes for SVG
Settings
- SVG unit: 'mm'
- Scale: 1mm (SVG) = 1 decimeter (Real World)
- Resolution: 90 DPI
Inkscape: Adding class attribute
- Inkscape does not (yet?) support adding a class attribute to elements, but will not remove it on saving
- It can be added manually using Inkscape's XML editor
- Display XML Editor (Edit > XML Editor)
- Select element, that should get a class, so that it will be selected in the XML-Editor
- Put '''class''' into the input box and '''room''' (or any other desired value) into the multiline box
- Press Set
Notes for local testing
- chrome/chromium should be started with "--allow-file-access-from-files"