小编Lui*_*uis的帖子

带有剪辑路径的视频在 Safari 中无法显示/工作

我用剪辑路径创建了一个视频。它在 Chrome 和 Firefox 上运行良好。但它在 Safari 中不起作用。视频看不到。只有当我在 safari 的浏览器控制台中停用剪辑路径时,我才能看到视频。所以问题的发生似乎是因为剪辑路径或者剪辑路径的 svg 标签有问题。有谁知道为什么以及我该如何解决这个问题?

我的代码如下:

body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

video {
  margin-right: 0;
  width: 46vw;
    height: 100vh;
    object-fit: cover;
}

.video-container {
  position: absolute;
  margin-left: 54vw;
  height: 100vh;
}

.border-container {
  position: absolute;
  right: 0;
  height: 100vh;
  width: 50vw;
}

.svg-clipped-text {
  -webkit-clip-path: url(#svgTextPath);
    clip-path: url(#svgTextPath);
}

.st0{fill:#E30D45;}

.svg-border {
    left: 0;
    height: 100vh;
    margin-left: 54vw;
    position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
  <div class="video-container">
      <video id="video1" width="1452" height="2000"  class="svg-clipped-text" …
Run Code Online (Sandbox Code Playgroud)

html css video svg clip-path

2
推荐指数
1
解决办法
1751
查看次数

标签 统计

clip-path ×1

css ×1

html ×1

svg ×1

video ×1