嵌入svg的视频标签 [英] video tag embedded in svg

问题描述

我正在尝试将视频嵌入svg(该svg只能在网络上观看).为此，我使用了foreignObject标签:

I'm trying to embed a video inside an svg (the svg will only ever be viewed on the web). For that, I'm using the foreignObject tag:

<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"
     style="border: 1px solid black;">
  <g>
    <g transform="translate(151,104) scale(1,1)">
      <rect x="0" y="0" width="300" height="200"></rect>
      <foreignObject x="0" y="0" width="300" height="200">
        <video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
      </foreignObject>
    </g>
  </g>
</svg>

从某种意义上说，它可以正常"显示视频，但相对于其父级<g>而言，它偏离了几个像素.我尝试了几种组合:使用视频样式，不使用样式，使用命名空间的视频标签等.这在Firefox中效果更好，但在Chrome(Mac和Linux)中完全无法使用.我不想在svg之外添加html标记，因为这样会比较麻烦(svg是使用React动态创建的).

It "works" in the sense that the video is displayed, but it's off by several pixels relative to its parent <g>. I tried several combinations: with style for the video, without styles, with namespaced video tag, etc. This works a lot better in firefox, but breaks completely in Chrome (Mac and Linux). I don't want to add an html tag outside the svg as this will be more hassle (the svg is created dynamically with React).

有人能得到类似的工作吗?

Has anyone been able to get something similar working?

推荐答案

去那里:

Translate将原点从左上角移至指定的坐标.如果将对象嵌入0,0，则会将其放置在新的原点.在这种情况下，您必须将其嵌入-translation坐标.

Translate moves the origin from the top left to the specified coordinates. If you embed an object at 0,0 it will be placed at the new origin. In this case you must embed it at -translation coordinates.

即使如此，我也必须增加宽度和高度.为什么?我不知道.似乎不是2分制.如果有人知道我很好奇.

Even so, I had to increase the width and height. Why? I don't know. It doesn't seem to be a scale by 2. If someone knows I am curious to know.

<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"  style="border: 1px solid black;">
    <g>
        <g transform="translate(151,104) scale(1,1)">
            <rect x="0" y="0" width="300" height="200"></rect>
            <foreignObject x="-151" y="-104" width="500" height="400">
                <video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
                    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
                </video>
            </foreignObject>
        </g>
    </g>
</svg>

这篇关于嵌入svg的视频标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！