SVG剪切路径问题

Question

我想将图像设置为svg形状。但这并不能填充整个容器元素。看起来好像被裁剪了。我应该怎么做才能解决该问题？这是我的代码； 这是图片链接image

body,
html {
   min-height: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}


.sideBar-img {
   position: absolute;
   left: 5%;
   right: 5%;
   top: 5%;
   bottom: 5%;
   background: #000000 url('https://images.unsplash.com/photo-1447678523326-1360892abab8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=f2c48f62e3ccbc0948518b2188118f95') no-repeat center center;
   background-size: cover;
   -webkit-clip-path: url(#clippedPath);
   clip-path: url(#clippedPath);
}

<div class="sideBar-img">
  <svg height="0" width="0">
     <defs>
        <clipPath id="clippedPath">
              <path d="M286.5,100.7C278,64.4,268.4,30.9,257.9,0.5H1.5v1080H260c9.7-28.8,18.5-60.3,26.5-94.2
              c28.8-122.5,46-276.1,46-442.8S315.3,223.2,286.5,100.7z" />
        </clipPath>
     </defs>
  </svg>
</div>