在添加objectBoundingBox后，使用SVG的响应式CSS剪辑路径

Question

＆＃13;

＆＃13;

html, body{
   margin:0;
  padding: 0;
}
div {
  background: crimson;
  width: 100vw;
  height: 100vh;
}
.clip {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

＆＃13;

<div class="clip">
  Test
</div>
<svg width="0" height="0">
  <defs>
    <clipPath id="svgPath">
      <path id="masksvg" d="M0,0H1449L828,900H0V0Z" />
    </clipPath>
  </defs>
</svg>

＆＃13;

＆＃13;

＆＃13;

svg剪辑形状路径没有响应。 http://codepen.io/praveenvijayan/full/PZMxqG

我尝试添加objectBoundingBox。

我创建了一个包含最少测试用例的代码段。请全屏查看以查看面具。

SVG

 <svg width="0" height="0">
  <defs>
     <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
        <path id="masksvg" d="M0,0H1449L828,900H0V0Z"/> 
     </clipPath>
  </defs>
</svg>

CSS

.clip {
   -webkit-clip-path: url(#svgPath);
   clip-path: url(#svgPath);
}