我用剪辑路径创建了一个视频。它在 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)