小编Muh*_*mad的帖子

用于填充多边形SVG形状的图像

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

我试图用图像填充六角形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>
Run Code Online (Sandbox Code Playgroud)

六边形的快照

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

谢谢

html css svg css3

2
推荐指数
1
解决办法
3467
查看次数

标签 统计

css ×1

css3 ×1

html ×1

svg ×1