iOS设备上SVG foreignObject结合mask实现视频文字遮罩失效的解决方案求助

嘿，这种跨端兼容的坑真的让人头大！我之前做类似文字遮罩视频效果的时候，也碰到过iOS Safari对SVG <foreignObject> 结合mask的支持问题，给你几个亲测有效的方向试试：

先聊聊可能的原因 #

iOS Safari的渲染引擎对SVG <foreignObject> 内部的媒体元素（比如你的<video>）支持一直有玄学问题，尤其是叠加mask的时候，很可能无法正确解析遮罩和视频的渲染层级逻辑。另外SVG mask的maskUnits设置、文字排版属性也可能触发iOS的渲染bug。

解决方案尝试 #

方案1：改用CSS遮罩替代SVG Mask #

CSS mask在iOS下的支持比SVG foreignObject稳定得多，我们可以把视频作为基础元素，用隐藏的SVG文字生成遮罩引用，直接给视频加CSS mask属性：

import { useRef, useEffect } from 'react';

function AnimatedVideoText() {
  const videoRef = useRef(null);

  useEffect(() => {
    videoRef.current?.play().catch(() => {});
  }, []);

  return (
    <div className="relative w-full aspect-[700/300] overflow-hidden">
      <video 
        ref={videoRef} 
        src="https://videos.pexels.com/video-files/3094026/3094026-uhd_2560_1440_30fps.mp4" 
        loop 
        muted 
        playsInline 
        className="w-full h-full object-fill"
        style={{ 
          objectPosition: "-30% 70%", 
          transform: "scale(0.6)", 
          transformOrigin: "center",
          // 兼容iOS的CSS遮罩写法
          WebkitMaskImage: "url(#text-mask-svg)",
          maskImage: "url(#text-mask-svg)",
          WebkitMaskRepeat: "no-repeat",
          maskRepeat: "no-repeat",
          WebkitMaskSize: "100% 100%",
          maskSize: "100% 100%"
        }}
      />
      {/* 隐藏的SVG用于生成文字遮罩，不占页面空间 */}
      <svg style={{ position: 'absolute', width: 0, height: 0 }}>
        <defs>
          <mask id="text-mask-svg" maskUnits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="black" />
            <text x="50%" y="33.33%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Your Creative
            </text>
            <text x="50%" y="55%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Development
            </text>
            <text x="50%" y="75%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Agency
            </text>
          </mask>
        </defs>
      </svg>
    </div>
  );
}

export default AnimatedVideoText;

方案2：移除foreignObject，直接在SVG内嵌入视频 #

有些情况下，iOS Safari能更好地处理SVG内部直接放置的<video>元素，不用通过foreignObject包裹，调整一下SVG内视频的坐标和尺寸即可：

import { useRef, useEffect } from 'react';

function AnimatedVideoText() {
  const videoRef = useRef(null);

  useEffect(() => {
    videoRef.current?.play().catch(() => {});
  }, []);

  return (
    <div className="w-full">
      <svg viewBox="0 0 700 300" className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <mask id="text-mask" maskUnits="userSpaceOnUse">
            <rect width="100%" height="100%" fill="black" />
            <text x="50%" y="33.33%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Your Creative
            </text>
            <text x="50%" y="55%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Development
            </text>
            <text x="50%" y="75%" dominantBaseline="middle" textAnchor="middle" fontSize="65" fontWeight="bold" fill="white" fontFamily="Outfit, sans-serif">
              Agency
            </text>
          </mask>
        </defs>
        {/* 直接在SVG内使用video元素，绑定mask */}
        <video 
          ref={videoRef} 
          x="0" y="0" width="700" height="300"
          src="https://videos.pexels.com/video-files/3094026/3094026-uhd_2560_1440_30fps.mp4" 
          loop 
          muted 
          playsInline
          style={{ 
            objectPosition: "-30% 70%", 
            transform: "scale(0.6)", 
            transformOrigin: "center",
          }}
          mask="url(#text-mask)"
        />
      </svg>
    </div>
  );
}

export default AnimatedVideoText;

方案3：检查视频基础属性与编码 #

• 确保视频编码是H.264，这是iOS Safari支持最好的视频编码，避免用VP9等小众编码
• 除了playsInline，可以额外加上webkit-playsinline属性（虽然现代iOS支持标准属性，但加了更保险）
• 测试时可以暂时移除Tailwind的font-outfit类，改用SVG原生fontFamily指定字体，避免框架样式在SVG内的兼容性问题

内容来源于stack exchange