Question

我已经看到了一种使用SVG以<image>的方式居中object-fit的方法。由于<image>是<svg>标记的一部分，因此意味着浏览器支持更加完善，并且无需对某些浏览器进行填充。基本上，它使用xMidYmid属性中的preserveAspectRatio对图像进行居中，然后将slice值添加为此属性的一部分，以使图像覆盖容器。这太棒了。

我想在<video>元素上使用此方法，因为无论出于何种原因，Microsoft决定不在视频或画布元素（？）上实现object-fit。我希望这个技术会转移好，我遇到的问题是<video>个元素只在SVG标签里面呈现在`标签内时，因为没有本地的svg视频元素，就像有。

是否有人知道如何使内部<foreignObject>元素及其子<video>元素继承preserveAspectRatio标记中的<svg>属性值？或者确实如何直接在<foreignObject>标签上设置这些属性？

如果有办法，我会喜欢它。

Codepen

以下是显示<image>和<video>标记的Codepen，您可以看到我在视频上遇到的问题。 https://codepen.io/pauljohnknight/pen/GyXLrK

HTML / SVG

<!-- THIS IS THE IMAGE THAT WORKS OK-->
<svg width="400px" height="400px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
</svg>

<!-- THIS IS THE VIDEO THAT ISN'T PlAYING BALL -->
<svg width="400" height="400" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">

<foreignObject width="100%" height="100%">
    <video autoplay loop x="0" y="0" width="400" height="400">
    <source src="https://s3.eu-west-2.amazonaws.com/bakerboxvideos/handwriting2.mp4" type="video/mp4">
    </video>
</foreignObject>

</svg>

CSS

body {
display: flex;
padding: 100px;
justify-content: center;
}

svg {
margin: 20px;
border: 5px solid;
box-sizing: border-box;
}

将SVG元素内的视频渲染为视频元素的ByPass Object-Fit Polyfills

0 个答案: