A few comments on making clickable SVG in Inkscape
Hi all,
I just finished making a clickable SVG in Inkscape, embedding the <svg/> in an HTML file, and verifying that it works. Much of it is obvious, so let me start with the unobvious stuff first:
If, for convenience, you use Ctrl+D to dup shapes, I think they're all clones of the first one. You need to de-clone them. But you're not done yet...
Shapes in Inkscape have a tenacious habit of reverting their ID and label to Inkscape-assigned values rather than the values you assign in object->property. Make your last two steps decloning and manually setting the ID and label, and BE SURE TO CLICK THE SET BUTTON OR THEY'LL REVERT.
Your events go in the area uncovered when you object->properties and then click "Interactivity". Each possible event is listed, and all you do is put in the javascript you want executed on that event. Don't wrap the Javascript in doublequotes.
SIZING THE DRAWING ------------------
Be SURE that your leftmost object's leftmost portion is at X value 0. Make sure your bottommost object's bottommost portion is at Y value 0. Note that in Inkscape, at least until they change it a few versions from now, Y=0 is at the bottom of the page, not at the top.
When you're done drawing, once again line up the left with X=0 and the bottom with Y=0, select everything, do the following:
* File->Document_properties * Resize page to drawing or selection * Note that the height and width changed when you did the preceding. * Add double the desired image padding to both height and width. (I added 2mm to each) * Select everything on the drawing, and move slightly so it's centered within the page. * Save the document, you're done with sizing.
Be aware that if the lower left of your document isn't anchored to x=0, y=0, clicking will be off or not happen.
HTH,
SteveT
Steve Litt April 2017 featured book: Troubleshooting Techniques of the Successful Technologist http://www.troubleshooters.com/techniques
participants (1)
-
Steve Litt