Question

我试图使用剪辑路径，但这不适用于firefox。我已经搜索了这个，我发现这个代码在堆栈溢出。我实现了几种形状，但这只适用于chrome和safari。

＆＃13;

.shape
{
  width: 300px;
  height: 300px;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  -webkit-clip-path: url(#clipper);
  -moz-clip-path: url(#clipper);
  clip-path: url(#clipper);
  background-color: $page-title-background-green;


}
img
{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 296px;
  height: 296px;
  -webkit-clip-path: url(#clipper);
  -moz-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

＆＃13;

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <polygon points=".15 0, .7 0, 1 .5, .7 1, .15 1, 0 .7, .2 .5, 0 .3"/>
    </clipPath>
  </defs>
</svg>
<div class="shape">
  <img src="http://lorempixel.com/g/600/400/">
</div>

＆＃13;

我该如何解决？

感谢＆＃39; S

Answer 1

我有这段代码：

＆＃13;

    <body>
        <svg class="svg-defs">
            <defs>
                <clipPath id="clipping">
                  <polygon points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"></polygon>
                </clipPath>
           </defs>
        </svg>
        <svg width="200" height="300">
          <style type="text/css" media="screen">
              image {
                  clip-path: url(#clipping);
              }
          </style>
          <image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" />
        </svg>
    </body>

＆＃13;

因此，尝试在SVG元素中设置样式，或者将样式属性赋予图像，如下所示：

<image style="clip-path: url(#clipping);" xlink:href="...">

CSS - 剪辑路径svg无法在Firefox上运行

1 个答案: