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

ここに行きます：

Translate左上から指定された座標に原点を移動します。 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>