3

我尝试使用 SVG 剪辑路径屏蔽元素并遵循此解决方法：https ://sarasoueidan.com/blog/css-svg-clipping/

Everthing 在 Chrome 和 Firefox 中运行良好，它似乎是最好的解决方案。

但是当我将内容放在容器中以使其居中时，chrome 的遮罩出现了问题。Firefox 使内容居中，而在 chrome 中，掩码似乎粘在浏览器的左侧。

你可以看到它是小提琴： https ://jsfiddle.net/mideyahdotch/wk58Lq7h/2/

<style>
.container {
  width:1080px;
  margin:0 auto;
} 

.svg-clipped {
  -webkit-clip-path: url(#svgPath); 
  clip-path:url(#svgPath);
} 
</style>

<div class="container">
 <div class="svg-clipped">
  <img src="http://placehold.it/1080x470">
 </div>
</div>

<svg height="0" width="0">
 <defs>
  <clipPath id="svgPath">
    <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" 
    stroke-miterlimit="10" d="M0.4,467.35l1080-30.77V0.22L0.4-.28V467.35Z" />
  </clipPath>
 </defs>
</svg>

有人知道这个问题的答案吗？谢谢你的支持！

米德亚

4

0 回答 0