给定一个像Google Visualization Example中的 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 中渲染图像。
我检查了整个 Stack Overflow，但只找到有关如何用图像平铺圆圈的信息：
这有自己的一组图像，因为图案只是平铺，不能为每个形状调整大小。
有没有可靠的方法来做到这一点？理想情况下，我想循环遍历每个圆圈并将其替换为一个大小与它所替换的圆圈相同的图像。
我下载了 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">^