时间戳

首页 > 解决方案 > 视频 SVG 仅在 Safari 中不渲染

svg - 视频 SVG 仅在 Safari 中不渲染

问题描述

我制作了一个带有视频显示的svg，如下所示：

    <video muted loop width="852" height="480" autoplay class="svg-clipped-text" style="  margin: 0 auto;
      display: block;">
  <source src="<?php echo get_stylesheet_directory_uri(); >/vid/video.mp4" type="video/mp4">
</video>

<svg height="0" width="0">
  <clipPath id="svgTextPath">
     <text x="20" y="200" textLength="800px" lengthAdjust="spacing" font-family="Calibri" font-size="210px" font-weight="bold">
       insider.
     </text>
   </clipPath>
</svg>

我的CSS：

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

它在 Chrome 和 Firefox 中正常工作，但在 Safari 中没有渲染。我已经尝试过在 stackoverflow 上找到的东西，但似乎没有任何东西可以解决我的问题..

谢谢 ！

标签： svgvideosafariclip-path

解决方案

推荐阅读