html - Chrome のコンテナで SVG マスキング clipPath が正しく機能しない

Question

SVG クリップパスで要素をマスクしようとして、次の回避策に従いました: https://sarasoueidan.com/blog/css-svg-clipping/

すべてがChromeとFirefoxでうまく機能し、それが最良のソリューションのようです.

しかし、コンテンツをコンテナに入れて中央に配置すると、クロムでマスクに問題が発生します。Firefox はコンテンツを中央に配置していますが、クロムではマスクがブラウザの左側に貼り付いているように見えます。

これはフィドルです： https://jsfiddle.net/mideyahdatch/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>

誰でもこの問題の答えを知っていますか? ご協力ありがとうございました！

ミデヤ