This post follows on from my last one, adding some thoughts about the way Compendium links can be encoded in SVG, a way that permits the links to be straight lines or any sor of arc or curve. There’s also a bit more scripting: a first go at handling links to transclusions of a node. This post includes svg code for the links and an example image.
Link Code
Here is the code used to draw the link between the activity and learning outcome nodes:
<!– Link actvity and learning outcome –>
<g id=”link1″ class=”link”>
<!– Use title to describe the link or human consumption, in the manner that the link label is used in Compendium and CompendiumLD. The desc element used to store the from and to nodes –>
<title>Link between learning outcome and activity</title>
<!– Use the <desc> element to specify the ids of the from and to nodes; could also state the node labels. –>
<desc>Link from node activity1 to node learningoutcomrome1</desc>
<line x1=”240″ y1=”116″ x2=”93″ y2=”116″ class=”link” marker-end=”url(#mArrow)”/>
</g>
<!– End of link –>
The link is coded as a group (<g>) of elements, includinga title and a description. In this example, the rendering of the link graphic (i.e. the arrow between the nodes) is coded as a <line> element. However, it could be coded as a <path>: SVG paths can be any arbitrary line, arc or curve. The <desc> element holds the ids of the nodes that the link connects between that could be used by both people and algoriths processing the map code. The <title> element is a title intended primarily for human consumption. This group of elements is identified as being a ‘link’ by the class atribute i.e. the code:
<g id=”link1″ class=”link”>.
Displaying transclusions
The ’2′ at the bottom right hand orner of the learning ourcome node indicates that this node appears in 2 maps; it is transcluded to 2 maps. If you hover your mouse over the ’2′ , you wuill see the titles of the two maps that this node appears in. One is ‘This map’, the is a link to the other map that the same node appears in.
(copy the code below and paste it into your web site (note this does not seem to work for some WordPress blogs, not sure why, perhaps a plugin is needed?):
<object style="border-style:solid;border-width:1em" data="http://compendiumld.open.ac.uk/documentation/examples/SVG/simple/map-all-in.svg" width="350" height="300" type="image/svg+xml">
Your browser can not display SVG. Browsers which display SVG include Chrome, Firefox, Opera, Safari and Internet Explorer 9.
</object>
I’ll add some notes about the coding of the transclusions later.
Finally, a note to myself. To make these SVG maps it editable in Inkscape, the CSS style information must be embedded in the file, not linked externally.
