我正在尝试将视频嵌入到 svg 中(svg 只能在网络上查看)。为此,我使用了 foreignObject 标签:
<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 动态创建的)。
有没有人能够得到类似的东西?
最佳答案
你去吧:
Translate 将原点从左上角移动到指定坐标。如果您在 0,0 嵌入一个对象,它将被放置在新的原点。在这种情况下,您必须将其嵌入 -translation 坐标。
即便如此,我也不得不增加宽度和高度。为什么?我不知道。好像不是2倍的比例。如果有人知道我很想知道。
<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 xmlns="http://www.w3.org/1999/xhtml" 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>
关于html - 嵌入在 svg 中的视频标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40324916/