如何用图像填充多边形？

Question

我尝试使用模式将图像放在多边形内，但它不起作用。 有没有办法填补这个？

 <svg tabindex="1" style="width: 175px; height: 216.506px;"> <polygon points="25,0 75,0 100,43 75,86 25,86 0,43" class="hexfield" tabindex="1" hex-row="0" hex-column="0"></polygon> <polygon points="100,44 150,44 175,87 150,130 100,130 75,87" class="hexfield" tabindex="1" hex-row="0" hex-column="1"></polygon> <polygon points="25,87 75,87 100,130 75,173 25,173 0,130" class="hexfield" tabindex="1" hex-row="1" hex-column="0"></polygon> <polygon points="100,130 150,130 175,173 150,216 100,216 75,173" class="hexfield" tabindex="1" hex-row="1" hex-column="1"></polygon> <defs> <pattern id="image1" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 64 64"> <image x="0%" y="0%" width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"></image> </pattern> </defs> <use xlink:href=".hexfield" fill="yellow"/> <use xlink:href=".hexfield" fill="url(#image1)"/> </svg> 

Answer 1

首先，请注意不推荐使用xlink：href 。

其次， xlink:href值不使用CSS语法（其中# means ID而. means class ）。

因此，为了引用一组SVG，您应该将xlink:href指向标签<g>的id。 但是如果你想只有一个SVG得到定义，请将xlink：href指向SVG id （不是class）：

 <svg tabindex="1" style="width: 175px; height: 216.506px;"> <g id="hexfield"> <polygon points="25,0 75,0 100,43 75,86 25,86 0,43"/> <polygon points="100,44 150,44 175,87 150,130 100,130 75,87"/> <polygon points="25,87 75,87 100,130 75,173 25,173 0,130" id="another"/> <polygon points="100,130 150,130 175,173 150,216 100,216 75,173"/> </g> <defs> <pattern id="image1" height="100%" width="100%" viewBox="0 0 64 64"> <image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png"/> </pattern> <pattern id="image2" height="100%" width="100%" viewBox="0 0 64 64"> <image width="64" height="64" xlink:href="https://cdn4.iconfinder.com/data/icons/imod/512/Software/iPhoto.png"/> </pattern> </defs> <use xlink:href="#hexfield" fill="yellow"/> <use xlink:href="#hexfield" fill="url(#image1)"/> <use xlink:href="#another" fill="red"/> <use xlink:href="#another" fill="url(#image2)"/> </svg>