图像填充多边形SVG形状

Question

我知道此主题已发布过，但是在标记重复项之前请先通读。
这是一个两部分的问题。

我正在尝试用图像填充六边形SVG形状。 我想要的是图像完全覆盖六边形区域，无论是必须自身拉伸还是压缩。 到目前为止，我只能使用固定宽度的图像来完成此操作，并且在其侧面也有某种填充。

我在其他问题上进行了搜索，但首先，它们不是六边形，其次，其中提供的代码无法完全填充六边形。 这是我的代码和快照。

 <a href="/bhive/business/index/8"> <svg style="width:117px;height:97px;" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"> <defs> <pattern id="img8" height="100" width="100" patternUnits="userSpaceOnUse"> <image preserverAspectRatio="none" height="100%" width="200%" x="-25" xlink:href="images/my-store.gif"> </pattern> </defs> <polygon style="stroke: #999DA3;" fill="url(#img8)" points="50 1 95 25 95 75 50 99 5 75 5 25"> </svg> </a> 

第二部分是，我希望这个六角形能够响应。 如何使其具有响应性，以便根据浏览器窗口调整大小？

谢谢

Answer 1

首先，从图片标签中删除高度，宽度和x属性。 在pattern和patternContentUnits =“ objectBoundingBox”中设置100％的高度和宽度。

 <svg> <defs> <pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox"> <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Gl%C3%BChwendel_brennt_durch.jpg/399px-Gl%C3%BChwendel_brennt_durch.jpg" /> </pattern> </defs> <polygon style="stroke: #999DA3;" fill="url(#pattern1)" points="50 1 95 25 95 75 50 99 5 75 5 25"/> </svg>