我想在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个模式?
[edit]我希望每个圈子都有不同的背景图片,抱歉。
答案 0 :(得分:1)
当然,我不是。请参阅下面的演示,也可以使用online:
<?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>