Question

所以我试图将SVG路径作为clipPath应用到div，但我似乎无法弄清楚为什么它不会在chrome中做任何事情，并在Firefox中显示空白页。 / p>

<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应用于块元素

1 个答案: