Question

我正在尝试使用svg为我的div附加一个剪切路径

  <svg xmlns="http://www.w3.org/2000/svg" class="svg-mask" viewBox="0 0 1166 1614">
    <defs>
      <clipPath id="svgMask" clipPathUnits="userSpaceOnUse"> // I also tried <mask>
        <path d="M51.77 1408.06c-6.04-8.38-11.39-22.76-9.38-42.96 2.79-28 15.97-54.81 15.97-54.81l18.27-56.13 48.56-147.97 43.29-130.69 43.45-131.35 46.75-140.07 27.98-84.77 28.97-87.89 35.55-108.8 41.31-126.25 32.92-98.43 28.31-83.78s7.82-30.32 15.76-42.93c2.9-4.61 24.32-43.1 79.37-36.19 61.08 7.66 61.75 4.09 60.33 25.5-.94 14.13 2.18 28.62 25.06 35.12 15.36 4.36 83.98 12.41 83.98 12.41l100.9 14.16 96.95 13.17s38.52 3.13 48.88-10.86c10.37-13.99 14.98-23.21 19.42-26.34 4.44-3.13 14.98-2.8 30.12-.66 15.14 2.14 51.85 6.91 51.85 6.91s29.46 6.09 35.88 30.78c6.42 24.69.99 38.35-3.95 54.81s-45.76 147.48-45.76 147.48L1001 504.1l-47.57 153.24L908 803.01l-55.8 177.6-46.75 148.47-42.79 135.13-40.98 129.7-18.43 59.75s-10.04 40.66-19.59 53.16-21.89 28.48-41.31 34.4c-19.42 5.93-32.43 4.61-55.8-.49-23.37-5.1-190.44-40.98-190.44-40.98l-193.07-42.47-117.36-25.51c0-.01-20.51-5.1-33.91-23.71z" fill="#fff"/>
      </clipPath>
    </defs>
  </svg>

结构简单，

<div class="wrapper>
  <div class="content>content</div>
</div>

css就像

body {
  position: relative;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  clip-path: url(#svgMask); // i also try mask: url(#svgMask);
  //...
}

.content {
  height: 100%;
  width: 100%;
  // other attributes
}

，但不显示任何内容。如果我在不使用<defs>和clipPath或mask的情况下使用svg，并且url类似于(/images/path.svg)，则一切正常，但在Firefox中效果不佳。

怎么了？

Answer 1

您的HTML给出了一些有关不关闭class属性引号的问题。您的剪贴蒙版正在工作。添加了一些颜色以显示蒙版轮廓。

body {
  position: relative;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  clip-path: url(#svgMask);
  background: blue;
}

.content {
  height: 100%;
  width: 100%;
  background: red;
}

<svg xmlns="http://www.w3.org/2000/svg" class="svg-mask" viewBox="0 0 1166 1614">
  <defs>
    <clipPath id="svgMask" clipPathUnits="userSpaceOnUse">
      <path d="M51.77 1408.06c-6.04-8.38-11.39-22.76-9.38-42.96 2.79-28 15.97-54.81 15.97-54.81l18.27-56.13 48.56-147.97 43.29-130.69 43.45-131.35 46.75-140.07 27.98-84.77 28.97-87.89 35.55-108.8 41.31-126.25 32.92-98.43 28.31-83.78s7.82-30.32 15.76-42.93c2.9-4.61 24.32-43.1 79.37-36.19 61.08 7.66 61.75 4.09 60.33 25.5-.94 14.13 2.18 28.62 25.06 35.12 15.36 4.36 83.98 12.41 83.98 12.41l100.9 14.16 96.95 13.17s38.52 3.13 48.88-10.86c10.37-13.99 14.98-23.21 19.42-26.34 4.44-3.13 14.98-2.8 30.12-.66 15.14 2.14 51.85 6.91 51.85 6.91s29.46 6.09 35.88 30.78c6.42 24.69.99 38.35-3.95 54.81s-45.76 147.48-45.76 147.48L1001 504.1l-47.57 153.24L908 803.01l-55.8 177.6-46.75 148.47-42.79 135.13-40.98 129.7-18.43 59.75s-10.04 40.66-19.59 53.16-21.89 28.48-41.31 34.4c-19.42 5.93-32.43 4.61-55.8-.49-23.37-5.1-190.44-40.98-190.44-40.98l-193.07-42.47-117.36-25.51c0-.01-20.51-5.1-33.91-23.71z" fill="#000"/>
    </clipPath>
  </defs>
</svg>

<div class="wrapper">
  <div class="content">content</div>
</div>

为什么SVG和CSS遮罩（Clippathing）不起作用

1 个答案: