Question

我一直试图在img1之类的iframe视频上设置svg，我使用clip-path属性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 width="100%" height="60vh" 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！

Answer 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 width="100%" height="60vh" 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;
  }
}

是否可以将SVG剪切路径相对于其容器居中？

1 个答案: