带有视频 html 的剪辑路径答案

【问题标题】：clip-path with video html带有视频 html 的剪辑路径
【发布时间】：2020-04-27 12:31:30
【问题描述】：

我在 Safari 浏览器中遇到带有 video 标签的 clip-path 属性问题。在 chrome 和 firefox 中，带有视频的剪辑路径可以正常工作。实际上 Saffary 应该支持它，也许我的代码还有其他一些错误。请给我一些建议，让它在 Safari 中运行。谢谢！

<video loop width="852" height="480" autoplay class="svg-clipped-text">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>

<svg height="0" width="0">
  <clipPath id="svgTextPath">
     <text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Luckiest Guy" font-size="210px">
       BOUNCE
     </text>
   </clipPath>
</svg>
<br />
<a href="https://sarasoueidan.com/blog/css-svg-clipping/" title="Sara Soueidan is a freelance front-end Web developer, author and speaker from Lebanon." >Sara Soueidan's Excellent SVG Clipping Article</a>
<p>Safari/Edge/IE no joy :(</p>

    video{
  display:block;
  margin:20px auto;
}
.svg-clipped-text {
    -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}


a{
  display:block;
  text-align:center;
  margin-top: -200px;
}
p{
  text-align:center;
}

codepen

试试here

【问题讨论】：

Safari 根本不支持这个。
@RobertLongson 你知道其他解决方案可以达到同样的效果吗？

标签： reactjs svg safari clip-path

【解决方案1】：

您不能在 Safari 浏览器中的视频标签上使用剪辑路径，因为它不会呈现形状。而不是在父块上使用剪辑路径，它将在 Safari 上工作。

【讨论】：

Safary 在浏览器中按 (ctr +/-) 缩放 svg 时也有错误。