将 svg 图像的 base 64 定义移动到外部文件中

Question

我在HTML文件中有一个SVG，该文件的图像以base 64编码。而不是在 html 文件中拥有完整的 base 64 字符串，有没有一种好方法将其保存在我在<svg>中的<image>定义中引用的不同文件中？

以下是相关代码的片段：

<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> 对象，但对于此任务来说似乎有点矫枉过正(我无法让它正常运行(。

编辑：为了澄清我想要实现的目标(我不确定这是否可能(，我想保留上面的代码结构，只用从单独文件中检索字符串的任何代码替换xlink:href=...行。我认为这可以用javascript完成，但我不知道怎么做。

Answer 1

下面是如何使用存储在单独文件中的 base64 数据在运行时更新 base64 属性的基本思想。 在这种情况下，它被存储在Javascript对象中。

请注意，由于伪造的 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>