Video-Tag eingebettet in Svg

Question

Ich versuche, ein Video in eine Svg einzubetten (die Svg wird immer nur im Web angesehen werden). Dafür verwende ich den foreign tag:

<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>

It „Werke“ in dem Sinne, dass das Video angezeigt wird, aber es ist weg von mehreren Pixeln relativ zu seinem <g>. Ich habe mehrere Kombinationen ausprobiert: mit Stil für das Video, ohne Stile, mit namespaced Video-Tag, etc. Das funktioniert viel besser in Firefox, aber bricht komplett in Chrome (Mac und Linux). Ich möchte kein HTML-Tag außerhalb der Svg hinzufügen, da dies mehr Ärger sein wird (die Svg wird dynamisch mit React erstellt).

Hat jemand etwas ähnlich arbeiten können?

Answer 1

Dort gehen Sie:

den Ursprung Übersetzen bewegt sich von oben auf die angegebenen Koordinaten links. Wenn Sie ein Objekt bei 0,0 einbetten, wird es am neuen Ursprung platziert. In diesem Fall müssen Sie es in -translation-Koordinaten einbetten.

Trotzdem musste ich die Breite und Höhe erhöhen. Warum? Ich weiß es nicht. Es scheint keine Skala von 2 zu sein. Wenn jemand weiß, dass ich neugierig bin.

<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>