CSSのclip-pathで指定したSVGのサイズが可変できない

Question

前提・実現したいこと

html/cssにてwebサイトのコーディングをしております。
clip-pathを使用してSVGの形に切り抜いたGoogleMapをページに埋め込みたいと考えています。
横幅はページに合わせて可変し、縦幅は固定した高さで配置をしたいのですが、くり抜きSVGの大きさが変わってくれません。

得たい結果
・GoogleMapの埋め込みをSVGパスでクリッピング
・幅は常にウィンドウ幅100%に合わせて可変
・縦幅はピクセル指定で固定

発生している問題・エラーメッセージ

・SVGの切り抜きパスのサイズが変わらない
・clip-pathを指定した要素のwidth,heightを変更してもSVGのサイズは変わらず、指定した場所で途切れる形となる

該当のソースコード

<div id="MapArea">
　<!--GoogleMap埋め込み-->
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.085692647855!2d139.74272201525864!3d35.6748919301957!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1b089%3A0x48c7d4fa5e528690!2z5Zu95Lya6K2w5LqL5aCC!5e0!3m2!1sja!2sjp!4v1592550005074!5m2!1sja!2sjp" width="100%" height="600" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
<!--SVG-->
<svg  viewBox="0 0 749.955 914.88"  width="100%" preserveAspectRatio="none"> 
  <clipPath id="Map_cpath">
    <path d="M1499.91,1789.77c-28-1.28-55.9-2.68-83.86-3.81-70.92-2.86-141.83-6-212.77-8.29-153.25-4.92-306.54-4.91-459.82-1.37-111,2.56-221.83,7.25-332.55,15q-113.67,7.93-227.16,18.24c-54.75,4.88-109.37,11.25-164,17.07-6.6.7-13.14,2.09-19.71,3.16V0L89.37,10q81.42,9,162.85,18.1c41,4.6,82.07,9.36,123.1,14q77.44,8.76,154.89,17.46c43,4.86,86,9.84,129.07,14.62q81.93,9.1,163.88,18Q877.3,98,931.47,103.55q58.65,6,117.33,11.64c35.47,3.47,70.93,7.07,106.43,10.21,45.12,4,90.26,7.83,135.43,11.25,56.46,4.27,113,8,169.44,12.06,13.28,1,26.54,2.17,39.81,3.27Z"/>
  </clipPath>
</svg>

#MapArea {
  width: 100%;
  height: 460px;
  clip-path: url(#Map_cpath);
}

試したこと

・div要素のwidth,height等のパラメータを変更
・svgのviewBoxやwidth,height等のパラメータを変更
・svgへpreserveAspectRatio="none"の設定

いずれも結果に変化は見られませんでした。

補足情報（FW/ツールのバージョンなど）

実行環境
macOS Catalina 10.15.2
Chrome 83.0.4103.106

Answer 1

自己解決致しましたので方法を共有致します。

clipPath要素へclipPathUnits="objectBoundingBox"を設定、path要素へtransform属性を設定し比率を調整することでスケーリングを行うことができました。
scaleの値を調整してpathが想定する形になれば、あとは切り抜き対象要素のwidthとheightに従って可変してくれます。

<svg class="svgs" viewBox="0 0 2400 2051" height="0" width="100%" preserveAspectRatio="xMidYMid slice"> 
        <defs>
            <clipPath id="Map_cpath_pc" clipPathUnits="objectBoundingBox">
                <path transform="scale(0.0004345, 0.00049)" d="M2400,4v1915c-340.36-68.38-683.48-112.82-1031-118.56-331-5.46-659.13,20.11-978.73,110.17C257.68,1948,130,2002.38,0,2049V122c191.34-21.57,383.33-26,574.81-8.24,280.93,26.1,561.2,59.23,842,86.75,179.56,17.61,359.63,27.15,539.64,3.53C2124.4,182,2277,125.66,2400,4Z"/>
            </clipPath>
        </defs>
</svg>

参考
https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive

Answer 2

自己解決致しましたので方法を共有致します。

path要素へtransform属性を設定し比率を調整することでスケーリングを行うことができました。
scaleの値を調整してpathが想定する形になれば、あとは切り抜き対象要素のwidthとheightに従って可変してくれます。

<svg class="svgs" viewBox="0 0 2400 2051" height="0" width="100%" preserveAspectRatio="xMidYMid slice"> 
        <defs>
            <clipPath id="Map_cpath_pc" clipPathUnits="objectBoundingBox">
                <path transform="scale(0.0004345, 0.00049)" d="M2400,4v1915c-340.36-68.38-683.48-112.82-1031-118.56-331-5.46-659.13,20.11-978.73,110.17C257.68,1948,130,2002.38,0,2049V122c191.34-21.57,383.33-26,574.81-8.24,280.93,26.1,561.2,59.23,842,86.75,179.56,17.61,359.63,27.15,539.64,3.53C2124.4,182,2277,125.66,2400,4Z"/>
            </clipPath>
        </defs>
</svg>

参考
https://stackoverflow.com/questions/53618192/create-responsive-svg-clip-path-making-svg-path-responsive