将 ClipPath 应用于块元素

Question

所以我尝试将 SVG 路径作为剪辑路径应用于 div，但我似乎无法弄清楚为什么它不会在 chrome 中执行任何操作并显示Firefox 中的空白页。

<p class="target" style="background:lime;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>

<img class="target" src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" alt="Cherry Blossoms.">

<svg:svg height="0">
    <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
        <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
        <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
    </svg:clipPath>
</svg:svg>

p { width:500px; border:1px solid black; display:inline-block; margin:1em; padding:2em; }
.target { clip-path: url(#c1);   -webkit-clip-path: url(#c1);}

Answer 1

CSS clip-path 仅适用于 -webkit- 浏览器。

您可以使用 foreignObject 元素将 HTML 元素导入 svg 元素并应用内联 clip-path 以使其在 Firefox 上也能正常工作。

Updated Fiddle

p {
  width: 500px;
  border: 1px solid black;
  display: inline-block;
  margin: 1em;
  padding: 2em;
}
body, html {
  height: 100%;
  margin: 0;
}
#cont {
  width: 500px;
  height: 500px;
}

<div id="cont">
  <svg width="100%" height="100%">
    <clipPath id="c1" clipPathUnits="userSpaceOnUse">
      <circle cx="25%" cy="25%" r="25%" id="circle" />
      <rect x="50%" y="20%" width="50%" height="80%" />
    </clipPath>
    <foreignObject clip-path="url(#c1)" width="100%" height="100%">
      <p style="background:lime;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
      <img src="http://sarasoueidan.com/demos/css-svg-clipping/html-img-clipped-with-css-svg-clippath/flowers.jpg" alt="Cherry Blossoms." />
    </foreignObject>
  </svg>
</div>

将 ClipPath 应用于块元素

Apply ClipPath to Block Element

css

svg

clipping