Steve Litt
2017-04-29 19:58:32 UTC
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
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