小编ser*_*l70的帖子

Safari 上 SVG foreignObject 中 <video> 元素的错误位置

我正在使用<foreignObject>SVG 元素<video>在基于 SVG 的 UI 中嵌入一个元素。

在所有浏览器上一切都很好，除了 Safari，其中视频元素的位置与其<foreingObject>容器完全错误。

我建立了一个简单的页面来重现这个问题，也可以在Codepen上找到：

<body style='background-color: #999'>
  <svg viewBox='0 0 100 200' style='width: 200px; height: 400px; border: 1px solid black'>

    <foreignObject x='10' y='10' width='80' height='80'>
      <div xmlns='http://www.w3.org/1999/xhtml' style='height: 100%; background-color: white; border: 1px solid blue'>
        <span>bla bla bla</span>
      </div>
    </foreignObject>

    <foreignObject x='10' y='110' width='80' height='80'>
      <div xmlns='http://www.w3.org/1999/xhtml'  style='width: 100%; height: 100%; border: 1px solid red'>
        <video xmlns='http://www.w3.org/1999/xhtml' width='100%' height='100%' playsinline autoplay src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4'></video>
      </div>
    </foreignObject>

  </svg> …

Run Code Online (Sandbox Code Playgroud)

html safari svg

ser*_*l70

lucky-day

5
推荐指数

1
解决办法

457
查看次数