0

我想在 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 个模式？

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

4

1 回答 1

1

当然，我不是。请参阅下面的演示，也可在线获取：

<?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>
于 2013-04-23T17:00:18.433 回答