鉴于SVG类似于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">
再次，禁止。
我尝试了这里使用的技术：
Does SVG support embedding of bitmap images?
但同样，它没有在SVG中渲染图像。
我检查了Stack Overflow，但只找到了如何用图像平铺圆圈的信息：
Add a background image (.png) to a SVG circle shape
它有自己的图像集，因为图案只是图块，不能为每个图形调整大小。
有没有可靠的方法呢？理想情况下，我想循环遍历每个圆圈，并将其替换为尺寸与其替换的圆形图像。
我下载了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">^
答案 0 :(得分：1)
您想要的元素是<image>而不是<img>。
属性cx和cy在<image>元素上毫无意义。您可以改为使用x和y（与第二次尝试时相同），并注意您需要在{{{{}}上指定非零width和height 1}}元素（再次像你的第二次尝试）。有关详细信息，请参阅svg spec。
答案 1 :(得分：0)
只需使用图像创建蒙版。绘制圆圈或引用蒙版的任何其他图形。