Question

我正在尝试在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动态创建的）。

有没有人能够得到类似的工作？

Answer 1

你去了：

平移将原点从左上角移动到指定的坐标。如果将对象嵌入0,0，它将被放置在新原点。在这种情况下，您必须将其嵌入 - 翻译坐标。

即便如此，我还是要增加宽度和高度。为什么？我不知道。它似乎不是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 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中的视频标签

1 个答案: