视频标签嵌入在svg

我试图在svg中嵌入视频（只能在网上查看svg）。对于这一点，我使用的foreignObject标签：视频标签嵌入在svg

<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动态创建的）。

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

来源

2016-10-30 hipsterdad

你去那里：

翻译移动由左到指定的坐标上的原点。如果你在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>

来源

2016-10-30 01:42:02

它的伟大工程！谢谢:)我似乎不需要改变宽度和高度。但我会记住这一点。 – hipsterdad

视频标签嵌入在svg

回答

相关问题