SVG ForeignObject с маской: URL (#...) работает нормально в другом месте, но не может замаскировать текст на устройствах ⇐ IOS

[Anonymous]

Я пытаюсь показать видео внутри текста, обрезав видео на текстовую маску. Он отлично работает над Android и Windows, но не работает на устройствах iOS. Любое предложение о том, как это исправить. < /P>


const { useRef, useEffect } = React;

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

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

return (





{/* three lines of white text punch holes in the mask */}

Your Creative


Development


Agency




{/* foreignObject spans the full SVG and is clipped by our mask */}





);
}

ReactDOM.createRoot(document.getElementById("root")).render();< /code>
.video-text-mask {
-webkit-mask-image: text;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: text;
}

.video-section {
overflow: hidden;
position: relative;
width: 400px;
height: 200px;

background-color: rgb(255, 255, 255);
}
.video-section video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-copy {
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 48.4vw;
margin-left: -2vw;
line-height: 78vw;

user-select: none;
mix-blend-mode: multiply;
}< /code>




< /code>
< /div>
< /div>
< /p>



iPhone < /th>
< /th>
iPhone < /th>


/>

< /td>


Подробнее здесь: https://stackoverflow.com/questions/796 ... to-mask-te