css - CSS クリップパスの配置の問題

Question

SVG 要素を使用してかなり単純な形状を作成し、それを を使用して CSS に挿入しましたclip-path。角を丸くする必要がありますが、何らかの理由で角の1つだけが完全に効果を発揮します。

これは形です：

<svg height="500" width="500">

  <path fill="#555555" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />

</svg>

として使うとこうなります。clip-path

body {
  background: #555;
}
img {
  clip-path: url(#svgPath);
  -webkit-clip-path: url(#svgPath);
}

<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="#FFFFFF" d="M50,0 L450,0 Q500,0 500,50 L500,400 Q500,450 450,450 L200,450 L175,500 L150,450 L50,450 Q0,450 0,400 L0,50 Q0,0 50,0z" />
    </clipPath>
  </defs>
</svg>

<img src="https://dummyimage.com/500" />

FireFox 内では完全に動作しているように見えますが、Chrome では右下隅を除いて角が正しくカットされていません。