視頻標籤嵌入在svg

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>