clip-path的默认单位是userSpaceOnUse，这似乎是根据根元素计算路径的坐标，这就是clip-path似乎产生错误输出的原因，在根元素上使margin和padding无效或绝对定位元素（如下面的代码片段）应该可以解决这个问题。

body {
  background: #555;
}
img {
  position: absolute;
  top: 0px;
  left: 0px;
  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="http://lorempixel.com/500/500/" />

然而，在真实的生活中，需要裁剪的实际元素可能出现在主体中的任何位置，因此我认为使用objectBoundingBox作为单元是更好的方法，如下面的代码片段所示：
一个二个一个一个
正如问题本身所提到的，这种行为只在Chrome中可见，而在Firefox中不可见，原因我不知道。Firefox生成的输出与预期的输出相似，即使（a）向主体添加了额外的填充+边距，（b）图像本身被 Package 在另一个容器中，该容器也具有填充+边距。
Firefox的输出与Chrome匹配的唯一情况是padding直接添加到img标签本身，我认为这是因为padding是元素的一部分，因此会影响坐标。

要将SVG剪辑路径仅用于CSS，只需执行以下操作：

img {
    clip-path: path('M0.1,0 L0.9,0 Q1,0 1,0.1 L1,0.8 Q1,0.9 0.9,0.9 L0.4,0.9 L0.35,1 L0.3,0.9 L0.1,0.9 Q0,0.9 0,0.8 L0,0.1 Q0,0 0.1,0z');
}

这样就不需要在模板或HTML中使用<svg>元素。