Dynamically created SVG elements don't appear

Greg

2006-04-21 19:55:12 UTC

And without any help from anyone else (I'm very proud of myself);o) 'tis
Fixed

<svg xmlns="http://www.w3.org/2000/svg" width="660pt" sodipodi:docname="timeLineObj.svg" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:docbase="C:\Documents and Settings\Administrator\Desktop\HeatingController" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" height="250pt" version="1.0" inkscape:version="0.43" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:version="0.32" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="svg2" >
<script xmlns="http://www.w3.org/2000/svg" type="text/ecmascript" id="script3" ><![CDATA[

boldStyle = "fill:none;stroke:#000000;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000";
greyStyle = "fill:none;stroke:#888888;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000";
redBox = "fill:#ff00cc;fill-opacity:0.5;stroke:#000000;stroke-width:0.25;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000;visibility:'visible';";
greenBox = "fill:#00ffcc;fill-opacity:0.5;stroke:#000000;stroke-width:0.25;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000;visibility:'visible';";
tielineStyle = "fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#ff0000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.1"
var mousedownX = null;
var mousePos = null;
var dragTargetObjID = null;
var dragging = false;
var eg = null;
var a=null;
var tielineDims = null;
var targetGrp = null;

//=====================Toggle the colour of the link=====================
// makes the hot water and central heating times the same
// yet to code how that manifests itself - which one overwrites which?
//================================================================
function toggleLinkColour(evt) {
var thisLink = evt.target;
var thisLinkParent = thisLink.parentNode;
var link1 = thisLinkParent.childNodes[1];
var link2 = thisLinkParent.childNodes[3];
var link3 = thisLinkParent.childNodes[5];

if (thisLinkParent.getAttributeNS(null, "tog") == 0){
thisLinkParent.setAttributeNS(null, "tog",1) ;
link1.setAttributeNS(null, "style", boldStyle);
link2.setAttributeNS(null, "style", boldStyle);
link3.setAttributeNS(null, "style", boldStyle);
}
else{
thisLinkParent.setAttributeNS(null, "tog",0) ;
link1.setAttributeNS(null, "style", greyStyle);
link2.setAttributeNS(null, "style", greyStyle);
link3.setAttributeNS(null, "style", greyStyle);
}
}
//========================Add events to the timeline====================
// Creates an eventGroup under the eventTimeline and containing
// a startEvent rect, a line and an endEvent rect
// On creation, these events snap to the nearest 15mins and are 1hour long
//================================================================
function switchEvent(evt) {
var targetObj = evt.target; //The object that received the event
var targetDoc = targetObj.ownerDocument; //Owner document
var targetGrp = targetObj.parentNode; //The group containing the target object (so that the new objects can be appended as siblings to the target object)
if (targetObj.getAttributeNS(null, "type")=="timelineGroup"){
var cRad = 2; //corner radius for marker boxes
var targetX = evt.pageX - targetObj.getAttributeNS(null, "x");
var targetY = evt.pageY - targetObj.getAttributeNS(null, "y");
var baseline = ((targetObj.getAttributeNS(null, "y")*1)+3) ; //note the *1 to convert the baseline result to a number, before adding the 3 to centre
var fifteenMins = targetObj.getAttributeNS(null, "width")/96; //insert the marks to the nearest 15mins
var halfHour = fifteenMins * 1; //second marker is already a 15 minute block so half an hour is just ONE more 15min
var fourtyFiveMins = fifteenMins * 2;
var oneHour = fifteenMins * 3;
var snapIndex = Math.round(targetX / fifteenMins);
var snapPosStart = ((snapIndex * fifteenMins)+(1* targetObj.getAttributeNS(null, "x"))); // *1 to convert
var snapPosEnd = (snapPosStart+oneHour);
tielineDims = "M " + (snapPosStart*1+6) + ", " + (baseline*1+3) + " L " + (snapPosEnd*1) + ", " + (baseline*1+3);

eventGroup = targetDoc.createElementNS("http://www.w3.org/2000/svg", "g");
eventGroup.setAttributeNS(null, "id", targetObj.getAttributeNS(null, "id") + "_eventGroup_" + snapIndex);
eventGroup.setAttributeNS(null, "type", "eventGroup");
targetGrp.appendChild(eventGroup); //Add it to the group containing the appropriate timeline target

startIndicator = targetDoc.createElementNS("http://www.w3.org/2000/svg", "rect");
startIndicator.setAttributeNS(null, "id", targetObj.getAttributeNS(null, "id") + "_startmark_" + snapIndex);
startIndicator.setAttributeNS(null, "type", "startmark");
startIndicator.setAttributeNS(null, "style", greenBox);
startIndicator.setAttributeNS(null, "x", snapPosStart);
startIndicator.setAttributeNS(null, "y", baseline);
startIndicator.setAttributeNS(null, "rx", cRad);
startIndicator.setAttributeNS(null, "ry", cRad);
startIndicator.setAttributeNS(null, "width", 6);
startIndicator.setAttributeNS(null, "height", 6);
startIndicator.setAttributeNS(null, "onmousedown", "dragTimerStart(evt)");
startIndicator.setAttributeNS(null, "onmousemove", "dragTimer(evt)");
startIndicator.setAttributeNS(null, "onmouseup", "dragTimerStop(evt)");
eventGroup.appendChild(startIndicator); //Add it to the group containing the appropriate timeline target

tieline = targetDoc.createElementNS("http://www.w3.org/2000/svg", "path");
tieline.setAttributeNS(null, "id", targetObj.getAttributeNS(null, "id") + "_tieline_" + snapIndex);
tieline.setAttributeNS(null, "style", tielineStyle);
tieline.setAttributeNS(null, "d", tielineDims);
eventGroup.appendChild(tieline); //Add it to the group containing the appropriate timeline target

//alert("zero=" + a[0] + " one=" + a[1] + " two=" + a[2] + " three=" + a[3] + " four=" + a[4] + " five=" + a[5] + " six=" + a[6] + " seven=" + a[7] + " eight=" + a[8] + " nine=" + a[9] + " ten=" + a[10] + " eleven=" + a[11] + " twelve=" + a[12] );

endIndicator = targetDoc.createElementNS("http://www.w3.org/2000/svg", "rect");
endIndicator.setAttributeNS(null, "id", targetObj.getAttributeNS(null, "id") + "_endmark_" + snapIndex);
endIndicator.setAttributeNS(null, "type", "endmark");
endIndicator.setAttributeNS(null, "style", redBox);
endIndicator.setAttributeNS(null, "x", snapPosEnd);
endIndicator.setAttributeNS(null, "y", baseline);
endIndicator.setAttributeNS(null, "rx", cRad);
endIndicator.setAttributeNS(null, "ry", cRad);
endIndicator.setAttributeNS(null, "width", 6);
endIndicator.setAttributeNS(null, "height", 6);
endIndicator.setAttributeNS(null, "onmousedown", "dragTimerStart(evt)");
endIndicator.setAttributeNS(null, "onmousemove", "dragTimer(evt)");
endIndicator.setAttributeNS(null, "onmouseup", "dragTimerStop(evt)");
eventGroup.appendChild(endIndicator); //Add it to the group containing the appropriate timeline target
}
}

//=============================Drag timer start==============================
// this event is only called from a target timer and so turning dragging on from a mouse
// click elsewhere shouldn't be an issue
//========================================================================
function dragTimerStart(evt){
var targetObj = evt.target; //The object that received the event
dragTargetObj = targetObj; //global variable that points to the event object
targetGrp = targetObj.parentNode; //The eventGroup containing the target mark
eg = targetGrp.childNodes; //eg = collection of group's child nodes (useful ones are 3,4 & 5 - start, line & end)
mousedownX = evt.pageX;
a=null; // The array containing the individual parameters from the line's 'd' attribute
dragging = true;
}

//=============================Drag timer event move=========================
// For each mouse move event, measure the new position of the mouse and move the
// dragged object back under it.
// To make sure the drag object doesn't get left behind, this event is invoked from
// the background timeline container too
//========================================================================
function dragTimer(evt){
if (dragging == true){
a = null;
currentMouseX = evt.pageX;
dragTargetObj.setAttributeNS(null, "x", currentMouseX-3);
tielineDims = eg[1].getAttributeNS(null, "d");
a = tielineDims.split(/[, | M | L]/); //split on commas, Ms or Ls
//round each array value
for (i=0; i<a.length; i++){
a[i]=Math.round(a[i]);
}

//redraw joining tieLine
if (dragTargetObj.getAttributeNS(null, "type") == "startmark"){
tielineDims = "M" + (currentMouseX+3) + ", " + a[2] + " L" + a[4] + ", " + a[5];
eg[1].setAttributeNS(null, "d", tielineDims);
}
if (dragTargetObj.getAttributeNS(null, "type") == "endmark"){
tielineDims = "M" + a[1] + ", " + a[2] + " L" + (currentMouseX-3) + ", " + a[5];
eg[1].setAttributeNS(null, "d", tielineDims);
}
}
}

//=============================Drag timer stop==============================
//Turns dragging off. Because the mouse pointer can escape from the target, this
// event should be called from a mouse up event on the timelineGroup object too.
//========================================================================
function dragTimerStop(evt){
a = null;
//eg = null;
dragTargetObj = null;
dragging = false;
}

]]></script>
<defs xmlns="http://www.w3.org/2000/svg" id="defs4" />
<sodipodi:namedview xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" inkscape:document-units="px" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" showguides="true" inkscape:window-width="1142" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:guide-bbox="true" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:cx="395.13338" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:zoom="1.304619" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:pageshadow="2" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:cy="728.43129" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:pageopacity="0.0" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:window-height="755" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" borderopacity="1.0" id="base" bordercolor="#666666" inkscape:window-x="0" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:window-y="46" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:current-layer="layer1" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" pagecolor="#ffffff" />
<metadata xmlns="http://www.w3.org/2000/svg" id="metadata7" >
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<cc:Work xmlns:cc="http://web.resource.org/cc/" rdf:about="" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" >
<dc:format xmlns:dc="http://purl.org/dc/elements/1.1/">image/svg+xml</dc:format>
<dc:type xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:resource="http://purl.org/dc/dcmitype/StillImage" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" />
</cc:Work>
</rdf:RDF>
</metadata>
<g xmlns="http://www.w3.org/2000/svg" inkscape:groupmode="layer" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="layer1" inkscape:label="Layer 1" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" >
<path xmlns="http://www.w3.org/2000/svg" style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="Timeline" d="M 120,28 L 770,28" />
<g xmlns="http://www.w3.org/2000/svg" id="HWtimelineGroup" >
<rect xmlns="http://www.w3.org/2000/svg" onmousedown="switchEvent(evt)" width="650" x="120" onmousemove="dragTimer(evt)" y="14" rx="0" height="12" ry="0" style="fill:#000000;fill-opacity:0.05;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.05" type="timelineGroup" id="HWtimelineTarget" onmouseup="dragTimerStop(evt)" />
</g>
<g xmlns="http://www.w3.org/2000/svg" id="CHtimelineGroup" >
<rect xmlns="http://www.w3.org/2000/svg" onmousedown="switchEvent(evt)" width="650" x="120" onmousemove="dragTimer(evt)" y="30" rx="0" height="12" ry="0" style="fill:#000000;fill-opacity:0.05;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.05" type="timelineGroup" id="CHtimelineTarget" onmouseup="dragTimerStop(evt)" />
</g>
<g xmlns="http://www.w3.org/2000/svg" transform="translate(67.6447,-78.45772)" id="LabelGroup" >
<text xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" x="10.540583" y="102.61897" style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans" id="HotWaterLabel" >
<tspan xmlns="http://www.w3.org/2000/svg" x="10.540583" y="102.61897" sodipodi:role="line" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="tspan2597" >HW</tspan>
</text>
<text xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" x="12.922419" y="119.70714" style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans" id="CentralHeatingLabel" >
<tspan xmlns="http://www.w3.org/2000/svg" x="12.922419" y="119.70714" sodipodi:role="line" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="tspan2601" >CH</tspan>
</text>
</g>
<text xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" x="22.510159" y="32.710236" style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans" id="timelineLabel" >
<tspan xmlns="http://www.w3.org/2000/svg" x="22.510159" y="32.710236" sodipodi:role="line" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="tspan3348" ><Label></tspan>
</text>
<g xmlns="http://www.w3.org/2000/svg" onclick="toggleLinkColour(evt)" tog="0" transform="translate(65.0269,-81.40793)" id="linkHW-CH" >
<path xmlns="http://www.w3.org/2000/svg" sodipodi:cx="88.588737" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:cy="175.01889" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:rx="4.9465795" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:ry="9.44347" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" transform="matrix(0.571439,0,0,0.421008,-6.05958,31.51435)" style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" sodipodi:type="arc" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="L1" d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1 83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317 175.01889 z" />
<path xmlns="http://www.w3.org/2000/svg" sodipodi:cx="88.588737" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:cy="175.01889" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:rx="4.9465795" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:ry="9.44347" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" transform="matrix(0.571439,0,0,0.421008,-6.05958,35.76649)" style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" sodipodi:type="arc" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="L2" d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1 83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317 175.01889 z" />
<path xmlns="http://www.w3.org/2000/svg" sodipodi:cx="88.588737" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:cy="175.01889" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:rx="4.9465795" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:ry="9.44347" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" transform="matrix(0.571439,0,0,0.421008,-6.05958,40.76534)" style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" sodipodi:type="arc" xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd" id="L3" d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1 83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317 175.01889 z" />
<rect xmlns="http://www.w3.org/2000/svg" width="8.8506336" x="39.988377" y="99.906265" rx="0" height="19.668055" ry="0" style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0" id="linkTarget" />
</g>
</g>
</svg>

-------------------------------------------------------------------

Post by Greg
This code is the start of a prototype for a time controller. Click on
the chain icon to toggle it on/off and click on the grey areas to add a
marker. Only, it doesn't show! The alerts seem to indicate the marker is
appended correctly! What's wrong with this code?(see below)
When I save the generated source code from 'Firefox/tools/Web
Developer/View Source/View Generated Source' and reopen it in Firefox
1.5, I see the results I'm after but never directly from the code.
Cheers,
Greg
ps I hope the text wrapping hasn't made it too unintelligible
======================================================
<?xml version="1.0" encoding="UTF-8" standalone="no"?>  <svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://web.resource.org/cc/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://inkscape.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="660pt"
height="250pt"
id="svg2"
sodipodi:version="0.32"
inkscape:version="0.43"
sodipodi:docbase="C:\Documents and
Settings\Administrator\Desktop\HeatingController"
sodipodi:docname="timeLineObj.svg"
version="1.0">
<script
type="text/ecmascript"
id="script3">
boldStyle =
"fill:none;stroke:#000000;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000";
greyStyle =
"fill:none;stroke:#888888;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000";
redBox =
"fill:#ff0000;fill-opacity:1;stroke:#0000ff;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-dasharray:none;stroke-opacity:1.0000000;visibility:'visible';";
//redBox = "fill:#ff00ff;";
function toggleLinkColour(evt) {
var thisLink = evt.target;
var thisLinkParent = thisLink.parentNode; //can't see where the
intervening nodes are that make it 1,3 & 5, rather than 0,1 &
2? var link1 = thisLinkParent.childNodes[1]; var link2 =
thisLinkParent.childNodes[3]; var link3 =
thisLinkParent.childNodes[5];
if (thisLink.parentNode.getAttribute("tog") == 0){
thisLinkParent.setAttribute("tog",1) ;
link1.setAttribute("style", boldStyle); link2.setAttribute("style",
boldStyle); link3.setAttribute("style", boldStyle);
}
else{
thisLinkParent.setAttribute("tog",0) ;
link1.setAttribute("style", greyStyle); link2.setAttribute("style",
greyStyle); link3.setAttribute("style", greyStyle);
}
}
function switchEvent(evt) {
var targetObj = evt.target; //The object that received the event var
targetDoc = targetObj.ownerDocument; //Owner document var targetGrp =
targetObj.parentNode; //The group containing the target object (so
that the new objects can be appended as siblings to the target object)
var targetX = evt.pageX - targetObj.getAttribute("x"); var targetY =
evt.pageY - targetObj.getAttribute("y"); //alert(evt.target.id + " " +
targetX + " " + targetY);
periodIndicator = targetDoc.createElement("rect");
//alert(periodIndicator);
periodIndicator.setAttribute("id", "startmark");
periodIndicator.setAttribute("style", redBox);
periodIndicator.setAttribute("x", targetX);
periodIndicator.setAttribute("y", targetY);
periodIndicator.setAttribute("width", 6);
periodIndicator.setAttribute("height", 6);
targetGrp.appendChild(periodIndicator); //Add it to the group
containing the appropriate timeline target //targetDoc.forceRedraw();
//Can't find any documentation on this, so don't know if it's called
correctly - doesn't work as far as I can tell
alert(targetGrp.getAttribute("id"));
alert(targetObj.getAttribute("id"));
alert(periodIndicator.getAttribute("id"));
// periodIndicator SEEMS to be there but can't view it - maybe
appended it in the wrong place?
}
}
</script>
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.304619"
inkscape:cx="395.13338"
inkscape:cy="728.43129"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:window-width="1142"
inkscape:window-height="755"
inkscape:window-x="0"
inkscape:window-y="46"
showguides="true"
inkscape:guide-bbox="true" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;fill-opacity:0.75;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 120,28 L 770,28"
id="Timeline" />
<g
id="HWtimelineGroup">
<rect
ry="0"
rx="0"
y="14"
x="120"
height="12"
width="650"
id="HWtimelineTarget"
onmouseup="switchEvent(evt)"
style="fill:#000000;fill-opacity:0.05;stroke:#dddddd;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
/>
</g>
<g
id="CHtimelineGroup">
<rect
ry="0"
rx="0"
y="30"
x="120"
height="12"
width="650"
id="CHtimelineTarget"
onmouseup="switchEvent(evt)"
style="fill:#000000;fill-opacity:0.05;stroke:#dddddd;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
/>
</g>
<g
id="LabelGroup"
transform="translate(67.6447,-78.45772)">
<text
id="HotWaterLabel"
y="102.61897"
x="10.540583"
style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream
Vera Sans" xml:space="preserve"><tspan
y="102.61897"
x="10.540583"
id="tspan2597"
sodipodi:role="line">HW</tspan></text>
<text
id="CentralHeatingLabel"
y="119.70714"
x="12.922419"
style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream
Vera Sans" xml:space="preserve"><tspan
y="119.70714"
x="12.922419"
id="tspan2601"
sodipodi:role="line">CH</tspan></text>
</g>
<text
xml:space="preserve"
style="font-size:12px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream
Vera Sans" x="22.510159"
y="32.710236"
id="timelineLabel"><tspan
sodipodi:role="line"
id="tspan3348"
x="22.510159"
<g
id="linkHW-CH"
transform="translate(65.0269,-81.40793)"
onclick="toggleLinkColour(evt)"
tog="0">
<path
sodipodi:type="arc"
id="L1"
sodipodi:cx="88.588737"
sodipodi:cy="175.01889"
sodipodi:rx="4.9465795"
sodipodi:ry="9.44347"
d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1
83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317
175.01889 z"
style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.571439,0,0,0.421008,-6.05958,31.51435)" />
<path
sodipodi:type="arc"
id="L2"
sodipodi:cx="88.588737"
sodipodi:cy="175.01889"
sodipodi:rx="4.9465795"
sodipodi:ry="9.44347"
d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1
83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317
175.01889 z"
style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.571439,0,0,0.421008,-6.05958,35.76649)" />
<path
sodipodi:type="arc"
id="L3"
sodipodi:cx="88.588737"
sodipodi:cy="175.01889"
sodipodi:rx="4.9465795"
sodipodi:ry="9.44347"
d="M 93.535317 175.01889 A 4.9465795 9.44347 0 1 1
83.642158,175.01889 A 4.9465795 9.44347 0 1 1 93.535317
175.01889 z"
style="fill:none;stroke:#888888;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
transform="matrix(0.571439,0,0,0.421008,-6.05958,40.76534)" />
<rect
ry="0"
rx="0"
y="99.906265"
x="39.988377"
height="19.668055"
width="8.8506336"
id="linkTarget"
style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0"
/>
</g>
</g>
</svg>