使poligon svg面罩响应

Question

我正在使用svg蒙版使图像具有背景的五边形元素，PC版本可以正常工作，但是当我尝试使其具有响应性（宽度：100％）时，它不起作用。我该怎么做才能转换svg蒙版并使其具有响应能力？

<a href="#" class="img">
  <svg id="svg-container" class="clip-svg">
    <rect class='svg-background' width="148" height="148" fill="#ffffff" />
    <div class="svg-image" style="background-image: url(img/image.jpg);"></div>
  </svg>
  <svg id="svg-clip">
   <defs>
    <clipPath id="clip-polygon">
       <polygon class="st0" points="94.8,0 0,78.1 0,180 190,180 190,78.1 "/>
    </clipPath>
    </defs>
  </svg>
</a>

这是CSS：

    .img {
        height: 180px;
        width: 100%;
        position: relative;

        svg {
            position:absolute;
            top:0;
            right:0;
            left:0;
            bottom:0;
            width:100%;
            height:100%;
            }
        .svg-image, .svg-background {
            background-size: cover;
            background-position: center;
            height: 180px;
            width: 100%;
            clip-path:url(#clip-polygon);
        }
        .svg-image2, .svg-background2 {
        clip-path:url(#clip-polygon2);
        }
}