外部SVGファイルを指定時のJavaScript
外部SVGファイルを指定している場合のJavaScriptの書き方
はじめまして。SVGを勉強中のとりがらと申します。
以下のような構成でHTML・SVGを作成しています。
（添付した図の通りです）
【XXX.html】
・embedタグでroot.svgを埋め込み。
【root.svg】
・ellipseオブジェクト
・useタグのchild.svgオブジェクト1
・useタグのchild.svgオブジェクト2
【child.svg】
・circleオブジェクト
・rectオブジェクト
このような場合、XXX.htmlに記述したJavaScriptにて、
『root.svg』内『useタグのchildオブジェクト1』の『rectオブジェクト』の色
を変えたいと考えております。
そこで、XXX.htmlに下記のようなJavaScriptを書いたのですが、
child.svg内の四角の要素を取得する時点で、エラーが発生してしまいました。
> svgSub2.getElementById is not a function
このような場合、どのようにJavaScriptを書けばよいのでしょうか？
SVGの記述の方がおかしいのでしょうか？
どなたか解決策のご教示の程、よろしくお願いいたします。
+==============================
+ 環境
+------------------------------
・WindowsXP
・Firefox 19.0
+==============================
+ 呼び出しhtml
+------------------------------
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" type="text/javascript">
function OnButtonClick(){
<!-- Root.svg内の楕円の色変更(OK) -->
var svgdocMain = document.getElementById("idRoot").getSVGDocument();
var svgMainDaen = svgdocMain.getElementById("idRootObj0");
svgMainDaen.setAttribute("fill", "#00FFFF");
<!-- Child.svgオブジェクト1を非表示(OK) -->
var svgSub1 = svgdocMain.getElementById("idRootObj1");
svgSub1.setAttribute("display", "none");
<!-- Child.svgオブジェクト2内の四角の色変更(NG) -->
var svgSub2 = svgdocMain.getElementById("idRootObj2");
var svgSubRect = svgSub2.getElementById("idChildObj1"); <!--←エラー発生-->
svgSubRect.setAttribute("fill", "#FFFFCC");
}
</script>
</head>
<body>
<form><input type="button" value="テスト" onclick="OnButtonClick();"/></form>
<embed id="idRoot" type="image/svg+xml" src="root.svg" />
</body>
</html>
+==============================
+ root.svg
+------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"
id="svg_root" >
<!-- 1.ROOT楕円 -->
<ellipse fill="#00FF00" cx="20" cy="40" rx="15" ry="25" id="idRootObj0">
</ellipse>
<!-- 2.Child.svg1 -->
<use xlink:href="child.svg#svg_child_g" x="0" y="100" id="idRootObj1" />
<!-- 3.Child.svg2 -->
<use xlink:href="child.svg#svg_child_g" x="0" y="200" id="idRootObj2" />
</svg>
+==============================
+ child.svg
+------------------------------
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"
id="svg_child">
<g id="svg_child_g">
<!-- 1.CHILD四角 -->
<rect fill="#FF00FF" x="50" y="50" width="40" height="40" id="idChildObj1">
</rect>
<!-- 2.CHILD円 -->
<circle fill="#00FF00" cx="50" cy="100" r="26.5" id="idChildObj2">
</circle>
</g>
</svg>
