The past few months have been incredibly frustrating as I made little headway in creating my clickable SVG of a juvenile skeleton using Raphaël.js. By clicking on a certain bone, the user would be taken to another page corresponding to age estimation methods for that bone and use the features specified to come up with an estimated age. Since clickable SVGs are created as paths that have beginnings and endings, each path corresponds to either a single bone or a closed path on a bone. As a result, this means that each bone would have its own link, so to simplify the process, entire regions of bones will be selected at once no matter which bone you click on. The skeletal regions have been split up according to standard anatomical regions: skull, thorax (ribs, vertebrae, sternum), upper limbs (hands, forearms, arms, clavicles, scapulae), pelvic girdle (pelvis and sacrum), and lower limbs.
Although I appeared to have the correct links and format for Raphaël.js, nothing would work and nothing showed up on my webpage. Fortunately, I think I have found a way around that. Instead of linking raphaël.js and my skeletal SVG data paths from separate files, I was able to successfully link embed the SVG data directly into the body of my html page without even using raphaël.js. Downside is that this makes the code on my html page much longer and look less clean. However, it correctly links and works and so I’m happy to have slightly less concise code if it means that one of the main functions will work!
As an example, I’ve copied and pasted my example here (https://jabiggs13.github.io/skull-test/). For right now, the outlines of the skeleton are linked to another website so when you click on a feature, it takes you to eskeletons.org – a website created by the Department of Anthropology at the University of Texas at Austin dedicated to teaching basic human skeletal anatomy as well as focusing on other primate skeletal morphology. (This was honestly the first site that popped in my head when testing to see if the linking feature of my SVG worked).
As it stands right now, there is a major problem th
at I had not anticipated. The only portion of the skeleton that is truly clickable is the outline of each bone, not the actual bone itself. This was not a problem I had thought about until I finally got everything working. My solution to this problem is basically messing with the original paths and outlines of the SVG so that the space between the outline is filled in and is the actual clickable content. With this process, there are now exponentially more paths, meaning that there are way more individual closed loops that would require their own separate links as the program (Inkscape – free!) is no longer recognizing my grouped regions (i.e. it is not recognizing the ‘ribcage’ but each individual rib or piece of rib that is its own separate loop). Though less than ideal, this may just be the nature of the beast so that each individual path would then have to have its own link, making my skeletal regions less useful as an overarching theme.
Despite this newest hiccup, I am incredibly relieved to be past this one major hurdle do I can now focus on each of the individual ageing methods that will link up to specific bones.
Links:
Leave a Reply