剪辑路径中的自适应svg

如何解决剪辑路径中的自适应svg

我正在尝试创建一个布局，在其中将svg插图作为响应放置在剪切路径中。这是针对education non-profit based in Richmond Ca

当前已发布的测试站点为here 我在webflow中构建并使用自定义嵌入对象。话虽这么说，我的svg，剪辑路径和背景博客代码应该与平台无关。我的webflow项目是here

模拟了所需的响应行为here

这是嵌入内容中的代码：

    #svg-wrapper{
    width:100%;
    margin-top:54px;
    position:relative;
  }
  #illoClipWrapper{
    clip-path: url(#clip-path);
    -webkit-clip-path: url(#clip-path);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
 
 #schoolBuildingIllo{
        position:absolute;
    right: 0;
    
  }
  
 #bgFill{
  }

<div id="svg-wrapper">
  <div id="illoClipWrapper">
      <img id="schoolBuildingIllo" src="https://uploads-ssl.webflow.com/5eb6fb8ca1192839ee0139c5/5f61407bbd670fa7d1e49db1_illo-why-we-exist_1400.svg"?>
  </div>
  <svg width="100%" height="100%" viewBox="0 0 1440 1200">
    <!-- ? defining svg clip path   -->
    <defs>
      <clipPath id="clip-path">
        <path d="M9.82311e-05 12.5805C325 -14.1666 581.094 7.02311 921 27.2482C1160.5 41.4988 1248.7 12.5808 1440 12.5805C1440 455.198 1440 1003.61 1440 1274C959.064 1274 488 1274 9.82311e-05 1274C-5.4877e-05 1008.25 -8.58043e-06 387.897 9.82311e-05 12.5805Z">
      </clipPath>
    </defs>

    <!-- ? svg background -->
    <path id="bgFill" d="M9.82311e-05 12.5805C325 -14.1666 581.094 7.02311 921 27.2482C1160.5 41.4988 1248.7 12.5808 1440 12.5805C1440 455.198 1440 1003.61 1440 1274C959.064 1274 488 1274 9.82311e-05 1274C-5.4877e-05 1008.25 -8.58043e-06 387.897 9.82311e-05 12.5805Z" fill="#F3F3F3">>
  </svg>
</div>

运行该代码段会使事情看起来有些古怪。上面链接的已发布测试站点提供了更清晰的视图。

我希望弄清楚的是如何使用css相对于其容器的右侧放置插图。目前，当我移动插图时，尽管将剪切路径应用于其父对象，但它似乎仍移出了其视口或剪切路径。我尝试在svg内进行所有操作，但发现让svg的某些部分变得更加令人困惑。

有人可以提供有关执行所需行为的最佳方法的指导。很高兴以任何方式帮助澄清。

非常感谢！