填充多边形 SVG 形状的图像答案

【问题标题】：Image to fill a polygonal SVG shape填充多边形 SVG 形状的图像
【发布时间】：2016-04-16 03:11:35
【问题描述】：

我知道这个主题之前已经发布过，但是在标记重复之前请仔细阅读。
这是一个两部分的问题。

我正在尝试用图像填充 六边形 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>

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

谢谢

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：

嗨 Sovon，我就是这么做的。现在我看到一个空的 Hex Shape。图片不见了。
可能是图片路径错误。无论如何，我正在通过一些更改来更新答案。
好的，成功了。只是一个问题，它（整个svg）不再居中。以前它是居中的。另外，你能指导我如何让这个 svg 更高一点吗？
不知道为什么你没有让它居中。要使 svg 更高，您需要更改多边形点的值。每个点都用它们的 x 和 y 值来描述，并且点按顺时针顺序排列。
使用比例变换比改变每个多边形点更容易。