外部svgファイルをuse要素を使って呼び出したい

Question

練習用に以下のようなディレクトリ構造にしました。

/example
   .master.svg
   .child.svg

そしてmaster.svgには

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
    <defs>
        <symbol id="circle">
            <circle cx="150" cy="200" r="100" fill="#06f"></circle> 
        </symbol>
    </defs>
    <use xlink:href="#circle"></use>
</svg>

これは正しく表示されます。

しかしchild.svgを以下のようにしていると、何も表示されません。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
    <use xlink:href="master.svg#circle"></use>
</svg>

なぜ何も表示されないのでしょうか？
相対パスを使って

<use xlink:href="./master.svg#circle"></use>

も使って見ましたが、何も表示されません。

ご教授よろしくお願いいたします。

Answer 1

もしかして、ローカルでファイルを開いていませんか？
ウェブブラウザには、クロスドメイン制約という同一のドメイン間でしか通信できない制約があります。
ファイルをウェブサーバー上で開いてみてください。