带图像的多边形答案

【问题标题】：Polygons with images带图像的多边形
【发布时间】：2016-06-30 21:51:51
【问题描述】：

我正在尝试与 CSS 一起做一些形状。

如何用里面的图像制作这些形状？

【问题讨论】：

可以的！！！我希望这不是你想知道的答案
怎么可能？

【解决方案1】：

这是一种使用方法：

svg {
  display: block;
  background: lightgrey;
}

<svg viewbox="0 0 10 6.1">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="6" height="4">
      <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="6" height="4" />
    </pattern>
  </defs>
  <g fill="url(#img)" stroke-width="0.1" stroke="lightgrey">
    <polygon points="0.3 0.3 5.5 0.3 3.4 3.1 0.3 3.1" />
    <polygon points="0.3 3.3 5.6 3.3 7.5 5.8 0.3 5.8" />
    <polygon points="5.7 0.3 4.65 1.75 7.7 5.8 9.7 5.8 9.7 0.3" />
    <polygon points="4.52 1.85 5.5 3.15 3.6 3.15" />
  </g>
</svg>

【讨论】：

Mozilla 不支持
你用的是什么版本 @user5533614 对我来说它在 Firefox 中运行良好
不错的解决方案@web-tiki
@web-tiki ，Mozilla 版本 47.0.1
@user5533614 我用的是同一个版本，效果很好。