我试图用标签将视频嵌入SVG中，但视频缩放不正确。我将视频放在SVG之外的一个变通方法可以工作，但这对我来说不是一个选项。它适用于Chrome和Firefox，但不适用于Safari。即使视频标签(使用选择器工具悬停(经过了适当的缩放，视频本身也没有。
经过研究，我发现了类似的问题，比如：<视频>Safari上SVG foreignObject中的元素SVG foreignObject在Safari 上无法正常工作
这个"；固定的"；定位问题，但不是比例问题。
所以我尽可能地孤立这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3840 2160">
<foreignObject width='3840' height='2160'>
<video width='3840' height='2160' muted playsinline autoplay >
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type='video/mp4'>
</video>
</foreignObject>
</svg>
</body>
</html>
它现在基本上只是一个SVG和一个视频。但这就是Safari v16.0上的样子：Safari和Firefox 上的视频
我以为这是解决这个问题的方法，但现在我不知道该怎么办了。也许其他人可以找到解决此错误的方法。
玩了一会儿之后，我找到了Safari的解决方法。如果你在视频标签中添加width: 100vw;和height: 100vh;，视频本身现在就可以满足我的要求，尽管建议的位置和比例仍然不正确。遗憾的是，Firefox保持了建议的比例。没有什么是浏览器检测无法解决的。这个变通方法可能只适用于我的情况，不是一个通用的解决方案，但它可能会帮助其他人。