Html SVG掩蔽clipPath在Chrome中的容器中无法正常工作

我尝试使用SVG片段路径屏蔽元素，并遵循以下解决方法：

在Chrome和Firefox中，一切都很好，它似乎是最好的解决方案

但是当我把内容放在一个容器中使其居中时，chrome的遮罩出现了问题。Firefox将内容放在中心位置，而在chrome中，遮罩似乎贴在浏览器的左侧

你可以在这张小提琴上看到：

.集装箱{
宽度：1080px；
保证金：0自动；
} 
.svg剪辑{
-webkit剪辑路径：url（#svgPath）；
剪辑路径：url（#svgPath）；
} 

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

米迪亚

<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>