SVGコミュのSVGに関する質問

さっそく質問です。
SVGを紙芝居のように html の代わりに使うことを考えています。
大量の文章には不向きなものの、リンクも画像表示もできるので、
十分に html の代わりになるものだと思います。
ところが、リンクで次の SVG へ飛ぶと、選択したスタイルシートが、
デフォルトに戻ってしまいます。
つまり、各ページ冒頭で
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet alternate="yes" href="alt.css" title="dark" type="text/css"?>
<?xml-stylesheet href="nrm.css" title="base" type="text/css"?>
と、してあった場合、
dark を選択してあったのに、次のページでは base に戻ってしまいます。

html の場合は、JavaScript (ecmascript) で、スタイルシートのタイトルを
cookie に記憶させて、次のページでも同じスタイルシートが選択されるように、
やりくりしていたのですが、それを書き代えてもなかなか成功しません。
最初のブラウザにスタイルシートを選択させる部分ですでに不成功です。

JavaScript に限らず、選択したスタイルシートを、
ページをまたいで固定する何か良い方法はないものでしょうか？
よろしくお願いします。

質問です。
問題:
『長方形が書けるようにしなさい。widthやheightを負の値にすると図形が表示されないのでこれを避けるためにチェックが必要である。』

コード:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" onload="init()">
<script type="text/ecmascript">
//<![CDATA[
var svgNS ="http://www.w3.org/2000/svg";
var C, NewLine = null;
function init() {
C = document.getElementById("Canvas");
C.addEventListener("mousedown",mdown, false);
C.addEventListener("mouseup",mup, false);
}
function mdown(E) {
NewLine = document.createElementNS(svgNS, "line");
NewLine.setAttribute("x1",E.clientX);
NewLine.setAttribute("y1",E.clientY);
NewLine.setAttribute("x2",E.clientX);
NewLine.setAttribute("y2",E.clientY);
NewLine.setAttribute("stroke","red");
NewLine.setAttribute("stroke-width","4");
C.appendChild(NewLine);
C.addEventListener("mousemove",mmove, false);
}
function mmove(E) {
NewLine.setAttribute("x2",E.clientX);
NewLine.setAttribute("y2",E.clientY);
}
function mup(E) {
C.removeEventListener("mousemove",mmove, false);
}
//]]></script>
<g id="Canvas">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
</g>
</svg>

画面に直線を引くところまでできましたがそこからできません。教えてください。
よろしくお願いします。

宿題は自分でやりましょうw

と、思いながらもやってみました
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" onload="init()">
<script type="text/ecmascript">
//<![CDATA[
var svgNS ="http://www.w3.org/2000/svg";
var C;
var sx, sy;
function init() {
C = document.getElementById("Canvas");
C.addEventListener("mousedown",mdown, false);
C.addEventListener("mouseup",mup, false);
}
function mdown(E) {
sx = E.clientX;
sy = E.clientY;
NewRect = document.createElementNS(svgNS, "rect");
NewRect.setAttribute("x",sx);
NewRect.setAttribute("y",sx);
NewRect.setAttribute("width",0);
NewRect.setAttribute("height",0);
NewRect.setAttribute("fill","none");
NewRect.setAttribute("stroke","red");
NewRect.setAttribute("stroke-width","4");
C.appendChild(NewRect);
C.addEventListener("mousemove",mmove, false);
}
function mmove(E) {
if (E.clientX > sx) {
NewRect.setAttribute("x",sx);
NewRect.setAttribute("width",E.clientX - sx);
} else {
NewRect.setAttribute("x",E.clientX);
NewRect.setAttribute("width",sx - E.clientX);
}
if (E.clientY > sy) {
NewRect.setAttribute("y",sy);
NewRect.setAttribute("height",E.clientY - sy);
} else {
NewRect.setAttribute("y",E.clientY);
NewRect.setAttribute("height",sy - E.clientY);
}
}
function mup(E) {
C.removeEventListener("mousemove",mmove, false);
}
//]]></script>
<g id="Canvas">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
</g>
</svg>

>>tadahiroさん
ありがとうございます。
宿題というか宿題ではないのですｗ
わからない点が出たのでそういう形で出してしまったんです。すみません。
次回からは違う形で出すようにします。

要素へのアクセスについて質問します。

複数の要素で構成された画像

　　<g id = "pic" >
　　　　<rect id = "rect" ... />
　　　　<circle id = "circle" ... />
　　</g>
を
　　pic = document.getElementById("pic");
　　copy1 = pic.cloneNode(true);
　　copy2 = pic.cloneNode(true);

して、その copy1 や copy2 の rect や circle にアクセスしたいのですが、どのようにすれば良いのでしょうか？