如何将 SVG 形状替换为图像

给定一个SVG，就像这个谷歌可视化示例中的SVG一样，在svg上画了这样的圆圈：

<circle cx="448.0843694002127" cy="236.6677163333033" r="12" stroke="#cccccc" stroke-width="1" fill="#0000ff"/>

我尝试使用 firebug 手动将其替换为相同 x/y 坐标的示例图像，例如将上面的代码替换为：

<img width="50px" height="50px" cy="135.71439117815066" cx="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

但这不起作用（似乎没有任何内容可以正确呈现）。我认为也许使用 cx/cy 是问题所在，所以我尝试将它们切换到常规的 x/y 属性：

<img width="50px" height="50px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png" x="343.43783232923863" y="135.71439117815066">

再次，不行。

我尝试了这里使用的技术：

SVG 是否支持嵌入位图图像？

但同样，它没有在 SVG 中渲染图像。

我检查了整个堆栈溢出，但只找到了有关如何用图像平铺圆圈的信息：

将背景图像 （.png） 添加到 SVG 圆形

这有自己的一组图像，因为图案只是平铺，不能为每个形状调整大小。

有没有可靠的方法可以做到这一点？理想情况下，我想遍历每个圆圈，并将其替换为一个图像，该图像的大小将调整为它所替换的圆圈。

我下载了SVG并手动添加了图像，但是出现以下错误：

XML 分析错误：前缀未绑定到命名空间

位置：（已删除 为了隐私）

第 2 行，第 1 列：<image width="50px" height="50px" y="135.71439117815066" x="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">

^