Question

我有一个svg六边形在一个数组中重复七次，每个六边形都填充了一个图案中的图像，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" height="390" width="375">
  <defs>
    <polygon id="hex" points="150,65 112.5,130 37.5,130 0,65 37.5,0 112.5,0" fill="url('#image-bg')" />
     <pattern id="image-bg" x="0" y="0" height="150" width="150" patternUnits="userSpaceOnUse">
       <image width="150" height="150" xlink:href="http://placekitten.com/150/150"></image>
    </pattern>
  </defs>
  <use xlink:href="#hex" x="112.5" y="0"><title>Cat 1</title></use>
  <use xlink:href="#hex" x="0" y="65"><title>Cat 2</title></use>
  <use xlink:href="#hex" x="225" y="65"><title>Cat 3</title></use>
  <use xlink:href="#hex" x="112.5" y="130"><title>Cat 4</title></use>
  <use xlink:href="#hex" x="0" y="195"><title>Cat 5</title></use>
  <use xlink:href="#hex" x="225" y="195"><title>Cat 6</title></use>
  <use xlink:href="#hex" x="112.5" y="260"><title>Cat 7</title></use>
</svg>

我可以在use标签中设置属性或其他内容（或设置嵌套在use标签中的标签），以便为每个六边形指定不同的图像吗？或者我是否必须为每个图像重复整个<pattern ...>标记？

如何在每次使用

0 个答案: