将<clippath> Package 在<defs>中是否有帮助？
https://stackoverflow.com/a/14389784/708381

<defs><clipPath></clipPath></defs>

解决方法：将剪辑路径应用到<foreignObject>中的HTML元素

我们需要调整剪辑路径以响应HTML元素，如下所示：

<clipPath id="clip" clipPathUnits="objectBoundingBox">
        <rect x="0" y="0" width="1" height="1" rx="0.1" ry="0.1" />
   </clipPath>

我们需要添加clipPathUnits="objectBoundingBox"并将元素的大小缩放为1x 1单位。
参见"Eric Meyer: Scaling SVG Clipping Paths for CSS Use"

<svg width="500" height="500" viewBox="0 0 500 500">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <rect x="0" y="0" width="1" height="1" rx="0.1" ry="0.1" />
    </clipPath>
    <foreignObject x="0" y="0" width="100%" height="100%">
      <div xmlns="http://www.w3.org/1999/xhtml" style="clip-path:url(#clip)">
        <iframe id="player" type="text/html" width="500px" height="500px" src="https://www.youtube.com/embed/m1mncceY4-4"></iframe>
      </div>
    </foreignObject>
</svg>

iframe在SO片段中被阻止-请参见this codepen
<foreignObject>元素可以引入quite a lot of cross-browser rendering issues.
因此，如果你的svg主要包含封装在<foreignObject>中的HTML，你应该考虑使用HTML/CSS方法。

<h3>HTML clipped</h3>
<div class="wrap" style="width:500px; aspect-ratio:1/1; clip-path:url(#clip)" >
  <iframe id="player" type="text/html" style="width:100%; height:100%;" src="https://www.youtube.com/embed/m1mncceY4-4?enablejsapi=1" ></iframe>
</div>

<h3>HTML rounded corners - no clip path</h3>
  <iframe id="player" type="text/html" style="width:500px; height:500px; border-radius: 50px;" src="https://www.youtube.com/embed/m1mncceY4-4?enablejsapi=1" ></iframe>

<!-- hidden svg clip asset -->
<svg style="width:0;height:0; position:absolute;">
  <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <rect x="0" y="0" width="1" height="1" rx="0.1" ry="0.1" />
    </clipPath>
</svg>