видео-тег, встроенный в 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). Я не хочу добавлять html-тег вне svg, так как это будет более сложным (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>