Html 在背景中显示大量图像（SVG）

我想用SVG显示很多圆圈。我们每个人都包含一个图像

我已经找到了一种方法。我定义了一种模式：

<defs>
        <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
            <image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
        </pattern>
</defs>

然后我显示圆圈：

<circle cx=x cy=y r=r stroke="white" stroke-width="2" fill="url(#imageExample)"/>

我的问题是：如果我想显示1000个圆，是否需要定义1000个模式

---

[编辑]对不起，我希望每个圆都有不同的背景图像。

当然，我没有。请参见下面的演示，也可提供：

试着用2或3张图片缩小比例，告诉我们效果如何。图案是否独特？如果是，那么是的。如果不是，您只需要一种模式。我还建议操纵1000个圆圈，看看他们的例子。你说的“独特”是什么意思？背景图像是独一无二的。定义许多模式需要花费大量时间吗？这将在每个圆圈中显示相同的图像-从问题上看，这不是100%清楚，但我不认为这是OP的目标。@Adrian很有可能是这样的。不同的背景模式需要不同的定义，除非它们在功能上相互依赖，所以我认为OP的问题在于不确定如何重用该模式。正如Adrian所说，我的目标是在每个圆圈中显示不同的图像。如果不定义很多模式，这是不可能的吗？如果没有，定义很多模式会花费时间吗？@Arnaud您可以实例化svg/xml模板（预计算），应该能够使用js定义模式src映像（我没有尝试过），或者将模式的src定义为调用脚本的（参数化）url，让服务器提供不同的图片（虽然不是在svg的上下文中，但我已经这样做了）。对不起，我还没有完全理解。但是感谢您的帮助，我稍后会重新阅读此内容。（如果您修改您的答案，我将接受）

<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/16174765/display-a-lot-of-images-in-background-svg  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="20cm" height="20cm"
   viewBox="0 0 1000 1000"
   preserveAspectRatio="xMinYMin"
   style="background-color:white; border: solid 1px black;"
>
    <defs>
            <pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
                <image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
            </pattern>
    </defs>
    <circle cx="123" cy="109" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="456" cy="332" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="12"  cy="444" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="77"  cy="567" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="66"  cy="712" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="47"  cy="855" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="843" cy="30"  r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="112" cy="321" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="387" cy="543" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
    <circle cx="444" cy="67"  r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
</svg>