填充多边形SVG形状的图像 [英] Image to fill a polygonal SVG shape

问题描述

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

I know this topic has been posted before, but please read through before marking duplicate.
This is a 2 part question.

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

I am trying to fill a hexagonal SVG shape with an image. What I want is for the image to fully cover the hexagonal area, whether it has to stretch or compress it self in order to do so. So far, I have only been able to accomplish this with a fixed width image, and that too, having some kind of padding around its sides.

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

I have searched for this on other questions, but first off, they are not hexagons, secondly, the code provided in them does not help in filling the hexagon completely. Here is my code and snapshot.

<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>

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

The second part is, that I want this hexagon to be responsive. How can I make it responsive, such that it resizes according to the browser window?

谢谢

推荐答案

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

First of all remove height, width and x attribute from image tag. Set 100% height and width in pattern and patternContentUnits="objectBoundingBox".

<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>

这篇关于填充多边形SVG形状的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！