Javascriptを埋め込んだSVGファイル内から外部のjavascriptを読み込む方法について

前提・実現したいこと

Javascriptを埋め込んだSVGファイルを作成しています。
SVGを描画するためのJavascriptライブラリがあるということで、調査を行なっているのですが、
これらのライブラリをSVGファイル内から呼び出すにはどのように記述すればよいでしょうか？

等

サンプル等を見るとhtmlファイルのhead部でライブラリの読み込みを行い、
SVGファイルを参照するorインラインでSVGを記述するようになっているのですが、
今回はhtmlファイルを使用せず、SVGファイル単体で動作することを希望しています。

html
1<head>
2    <meta http-equiv="Content-Type" charset="UTF-8">
3    <script src="js/d3.v3.min.js" charset="utf-8"></script>
4</head>
5<body>
6    <svg>
7        <!-- インライン -->
8    </svg>
9    <!-- 参照 -->
10    <object type="image/svg+xml" data="hoge.svg"></object>
11</body>

該当のソースコード

棒グラフを描画するSVGファイル(hoge.svg)

<?xml version="1.0" encoding="utf-8"?>
<svg id="master-artboard" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" style="enable-background:new 0 0 336 235.2;" width="1400px" height="980px">
	<g transform="matrix(3.919999047851853, 0, 0, 3.919999047851853, 320.1520572900305, -1553.691558040917)">
		<g id="g-1" transform="matrix(1, 0, 0, 1, 1.8474111129762605e-12, 4.618527782440651e-13)">
			<g id="g-1">
				<path d="M 34.400002 546.5 H 49.200002 V 565.000024 H 34.400002 V 557.900024 Z" class="st24" style="fill: rgb(170, 46, 41);"/>
			</g>
			<g id="g-2">
				<path d="M 62 523.5 H 76.8 V 565.000024 H 62 V 557.900024 Z" class="st5" style="fill: rgb(239, 73, 57);"/>
			</g>
			<g id="g-3">
				<path d="M 89.5 512.099976 H 104.3 V 565.000024 H 89.5 V 557.900024 Z" class="st8" style="fill: rgb(240, 95, 48);"/>
			</g>
		</g>
	</g>
	<script type="text/javascript">
		// j3等を使用してグラフの描画を行なう
	</script>
</svg>

行動規範の内容に同意します

回答2件

ベストアンサー

SVG文書から外部のJavaScriptファイルを読み込むにはscript要素のxlink:href属性を用います.

XML
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2  <!--外部ライブラリの読み込み-->
3  <script xlink:href="some.js"/>
4  <script>
5<![CDATA[
6//ライブラリを使ったコード
7//NOTE:SVGでは(XMLをベースとするため)CDATAセクションは必須です！
8]]>
9  </script>
10</svg>