svgイメージのベース64の定義を外部ファイルに移動

Question

私はSVGをベースファイル64にエンコードされたHTMLファイルに持っています.HTMLファイルに64ビットの完全な文字列を入れるのではなく、良い方法ですこれを私が<image>の定義で参照している別のファイルに入れておきます。<svg>の中にありますか？ここで

は、問題のコードの抜粋です：

<svg> 
    <image 
    y="0" 
    x="0" 
    id="image3698" 
    xlink:href="data:image/jpeg;base64,/9j/4AAQSkL... [...thousands of characters...]" 
    height="1082.88" 
    width="1280"/> 
</svg> 

私はこのために<use>オブジェクトを使用してに見てきたが、それは、このタスクのためにやり過ぎのように思える（と私はそれが機能するために取得することはできません正しく）。

EDIT：私が達成したいことを明確にするために（そして私はそれが可能であるとは確信していません）上記のコード構造を維持したいと思います。xlink:href=...行を別のファイルから文字列を取り出すコード。私はこれがjavascriptでできると思うだろうが、私はどのようにわからない。

Answer 1

ここでは、別のファイルに格納されたbase64データを使用して、実行時にbase64属性を更新する方法の基本的な考え方を示します。この場合、Javascriptオブジェクトにdtoredされます。

この例は、偽のbase64データのために動作しないことに注意してください。

base64imgData = { 
 
    'foo': "data:image/jpeg;base64,/9j/4AAQSkL... [...thousands of characters...]" 
 
} 
 

 
// Get a reference to our <image> element 
 
var img = document.getElementById("image3698"); 
 

 
// Update the xlink:href attribute on the element 
 
// Needs to be done a special way because of the attribute's namespace ("xlink:") 
 
xlinkNS = "http://www.w3.org/1999/xlink"; 
 
img.setAttributeNS(xlinkNS, "xlink:href", base64imgData.foo);

<svg> 
 
    <image 
 
    y="0" 
 
    x="0" 
 
    id="image3698" 
 
    xlink:href="" 
 
    height="1082.88" 
 
    width="1280"/> 
 
</svg>