可以将 SVG 剪辑路径相对于其容器居中吗？

Posted 2023-03-06

【中文标题】可以将 SVG 剪辑路径相对于其容器居中吗？

【英文标题】：It is possible to center an SVG clip-path with respect to its container?

【发布时间】：2019-10-23 06:57:27

【问题描述】：

我一直在尝试在 iframe 视频上设置一个 svg，例如 img1!，我使用剪辑路径属性 css，但问题是 svg 始终位于 (0,0) 视频的坐标上.

我尝试更改 svg 视图框中的原点，此外，我尝试更改 svg 和 iframe 的大小以进行响应，但没有成功。

.hidden 
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;


.x 
  background: red;
  height: 60vh;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  svg 
    height: 60vh;
    path 
      height: auto;
      right: 0;
    
  
  iframe 
    position: absolute;
    top: 0;
    //left: 50%;
    //right: 50%;
    -webkit-clip-path: url(#clip);
    height: 60vh;
  

<div class="x">
  <svg version="1.1" id="Layer_1" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px" viewBox="50 50 1534 1503" style="enable-background:new 50 50 1534 503;" xml:space="preserve">
        <defs>
            <clipPath id="clip">
                <path class="cls-1" d="M326,506c.33,3.33.83,6.66.94,10,.08,2.15.38,4,2,5.52,7.18,6.83,14.27,13.74,21.5,20.71l26.27-7.54V514.8c-7.95-7.6-17.82-13.73-25.13-23.68,11.3-4,21.23-7.94,31.41-11,11.14-3.37,21.78-7.26,29.72-18.19V445.58l-70.87-65.12c-1.24-9.74-2.51-20.11-3.9-30.46-.52-3.85-1.16-7.7-2.06-11.48a9.1,9.1,0,0,0-2.46-4c-3.5-3.5-7.16-6.83-10.15-9.65-2.51-18.41-1.8-36.34-7.39-53.36-1.94-5.94-4.79-11.58-7.59-18.23-13.73,22.73-13,47.3-15.18,68.36-4.46,5.37-7.31,9.35-10.74,12.75a12.4,12.4,0,0,0-3.35,7.6c-1.79,13-3.37,26-4.94,38.45L203,445.81v17.11c6.59,7.13,14.26,13,24,16.13,10.94,3.51,21.75,7.42,32.45,11.1,1.29,2.65.32,4.21-1.4,5.89-6.5,6.32-12.87,12.8-19,19v19.55l26.68,7.77c3-3,6.12-6.18,9.33-9.31,2.62-2.55,5.07-5.39,8.05-7.43,5-3.39,6.83-7.76,6-13.59a52.6,52.6,0,0,1,0-6.53c5.4,2.8,10.34,5.79,15,0l1,.54c0,3-.16,6,.05,9s-1.47,6.62,3.58,8.47c5-5.13.49-12.17,3.33-18,4.54,5.09,9,3.51,13.54.49" transform="translate(-202 -252.3)"/><path class="cls-1" d="M308,294.5l-4.63,3.09c-1.11,5.56-2.91,11.2-3.17,16.92a55,55,0,0,0,2,15.94c.56,2.15,3.47,3.71,5.36,5.58,3.3-2.34,5.91-3.59,6.67-8,1.78-10.23.73-20.09-1.45-30l-4.29-3.53" transform="translate(-202 -252.3)"/>
            </clipPath>
        </defs>
    </svg>
  <iframe   src="https://www.youtube-nocookie.com/embed/GhjitA8x4LI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

你可以看到我的actual code！

【问题讨论】：

转换为 objectBoundingBox 单位。

【参考方案1】：

我遵循@Robert Longson 的评论...所以我使用属性 clipPathUnits="objectBoundingBox" 但另外我必须使用 transform="scale(0.00472344244, 0.00343548165) 属性才能工作，最后的代码看起来喜欢...

html

<div class="mid-panel">
  <svg version="1.1" id="Layer_1" class="hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="50px" y="50px" viewBox="50 50 1534 1503" style="enable-background:new 50 50 1534 503;" xml:space="preserve">
        <defs>
            <clipPath id="clip" clipPathUnits="objectBoundingBox" transform="scale(0.00472344244, 0.00343548165)>
                <path class="cls-1" d="M326,506c.33,3.33.83,6.66.94,10,.08,2.15.38,4,2,5.52,7.18,6.83,14.27,13.74,21.5,20.71l26.27-7.54V514.8c-7.95-7.6-17.82-13.73-25.13-23.68,11.3-4,21.23-7.94,31.41-11,11.14-3.37,21.78-7.26,29.72-18.19V445.58l-70.87-65.12c-1.24-9.74-2.51-20.11-3.9-30.46-.52-3.85-1.16-7.7-2.06-11.48a9.1,9.1,0,0,0-2.46-4c-3.5-3.5-7.16-6.83-10.15-9.65-2.51-18.41-1.8-36.34-7.39-53.36-1.94-5.94-4.79-11.58-7.59-18.23-13.73,22.73-13,47.3-15.18,68.36-4.46,5.37-7.31,9.35-10.74,12.75a12.4,12.4,0,0,0-3.35,7.6c-1.79,13-3.37,26-4.94,38.45L203,445.81v17.11c6.59,7.13,14.26,13,24,16.13,10.94,3.51,21.75,7.42,32.45,11.1,1.29,2.65.32,4.21-1.4,5.89-6.5,6.32-12.87,12.8-19,19v19.55l26.68,7.77c3-3,6.12-6.18,9.33-9.31,2.62-2.55,5.07-5.39,8.05-7.43,5-3.39,6.83-7.76,6-13.59a52.6,52.6,0,0,1,0-6.53c5.4,2.8,10.34,5.79,15,0l1,.54c0,3-.16,6,.05,9s-1.47,6.62,3.58,8.47c5-5.13.49-12.17,3.33-18,4.54,5.09,9,3.51,13.54.49" transform="translate(-202 -252.3)"/><path class="cls-1" d="M308,294.5l-4.63,3.09c-1.11,5.56-2.91,11.2-3.17,16.92a55,55,0,0,0,2,15.94c.56,2.15,3.47,3.71,5.36,5.58,3.3-2.34,5.91-3.59,6.67-8,1.78-10.23.73-20.09-1.45-30l-4.29-3.53" transform="translate(-202 -252.3)"/>
            </clipPath>
        </defs>
    </svg>
  <iframe   src="https://www.youtube-nocookie.com/embed/GhjitA8x4LI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

body 
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #333;

.hidden 
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;

.mid-panel
  background: #1d1d1d;
  height:60vh;
  position: relative;
  width: 100%;
  min-height: 350px;
  iframe 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-clip-path:url(#clip);
    clip-path:url(#clip);
    height: 60vh;
    max-width: 500px;
    min-width: 400px;
    min-height: 350px;