Provides basic functionality to take the #include graph of a preprocessed file and plots it as a diagram in SVG.

Writing onmouseover/onmouseout event handlers to provide additional information.

The idea here is to use the <defs> and <use> elements n SVG. It seems that any number of <defs> elements can be in an SVG document.

The original text and the replacement text are paired within a <defs> element thus:

    <text id="original" font-family="Verdana" font-size="12" text-anchor="middle" x="250" y="250">Original text.</text>
    <text id="original.alt" font-family="Courier" font-size="12" text-anchor="middle" x="250" y="250">
        <tspan xml:space="preserve"> One</tspan>
        <tspan x="250" dy="1em" xml:space="preserve"> Two</tspan>
        <tspan x="250" dy="1em" xml:space="preserve">Three</tspan>

Important features using <defs>

  • Pairs have an ID and and ID + ”.alt”

  • Original and alt must have the same location and centering otherwise

    onmouseover/onmouseout events might not match up.

  • xml:space=”preserve” is on each tspan element (alternatively space padding

    could be suspended in the XmlWriter).

  • The first tspan element does not need an x value (it inherits one).

  • Subsequent tspan elements do need an x value as x has been incremented by the

    previous tspan.

  • Indentation of tspan has no effect as xml:space=”preserve” is not true

    at that point.

  • Space padding needs to be made to line things up.

  • xlink namespace must be declared.

Switching using <use>

The use element and event handlers will establish the initial conditions on document load:

<use xlink:href="#original" onmouseover="switch_to_alt(evt)" onmouseout="switch_from_alt(evt)" />

Generating ID values

They just need to be unique with ”.alt” as the alternate suffix. A clear way would to be pass around an ever increasing integer around the graph. Alternately use depth/width e.g. “”. There is no clear advantage to the latter.

Javascript Event Handlers

Java script needs to be written within a script element thus:

<script type="text/ecmascript">
// ]]>

Switch handlers work are like this (they are fairly defensive):

These work for IE/Firefox:

function switch_to_alt(evt) {
    var myTextTgt =;
    myOldLink = myTextTgt.getAttribute("xlink:href");
    if (myOldLink.lastIndexOf(".alt") == -1) {
        myTextTgt.setAttribute("xlink:href", myOldLink+".alt");

function switch_from_alt(evt) {
    var myTextTgt =;
    myOldLink = myTextTgt.getAttribute("xlink:href");
    if (myOldLink.lastIndexOf(".alt") != -1) {
        myOldLink = myOldLink.substring(0, myOldLink.lastIndexOf(".alt"));
    myTextTgt.setAttribute("xlink:href", myOldLink);

function swap_id(evt, theId) {
    var textTgt =;
    textTgt.setAttribute("xlink:href", theId);


This works for Opera: when called with:


[swap_id() works with Firefox, none of this works with IE.]

  <script type="text/ecmascript">
var altSuffix = ".alt";

function switch_to_alt(elem) {
    myHref = elem.getAttributeNS('', 'xlink:href');
    if (myHref.lastIndexOf(altSuffix) == -1) {
        elem.setAttributeNS('', 'xlink:href', myHref + altSuffix);

function switch_from_alt(elem) {
    myHref = elem.getAttributeNS('', 'xlink:href');
    if (myHref.lastIndexOf(altSuffix) != -1) {
        myHref = myHref.substring(0, myHref.lastIndexOf(altSuffix));
        elem.setAttributeNS('', 'xlink:href', myHref);

function swap_id(elem, theId) {
    elem.setAttributeNS('', 'xlink:href', theId);

// ]]>
cpip.IncGraphSVGBase.processIncGraphToSvg(theLex, theFilePath, theClass, tptPos, tptSweep)

Convert a Include graph from a PpLexer to SVG in theFilePath.