Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

video tag embedded in svg

Tags:

html

svg

I'm trying to embed a video inside an svg (the svg will only ever be viewed on the web). For that, I'm using the foreignObject 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 "works" in the sense that the video is displayed, but it's off by several pixels relative to its parent <g>. I tried several combinations: with style for the video, without styles, with namespaced video tag, etc. This works a lot better in firefox, but breaks completely in Chrome (Mac and Linux). I don't want to add an html tag outside the svg as this will be more hassle (the svg is created dynamically with React).

Has anyone been able to get something similar working?

like image 518
hipsterdad Avatar asked Oct 30 '16 00:10

hipsterdad


People also ask

Can videos be SVG?

Videos can be embedded directly into an SVG by wrapping them in a <foreignObject> element.

Can you embed HTML in SVG?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

What is foreignObject in SVG?

The <foreignObject> element of SVG includes elements from a different XML namespace.

Can SVG embed image?

SVG supports embedded content with the use of 'image' and 'foreignObject' elements.


Video Answer


1 Answers

There you go:

Translate moves the origin from the top left to the specified coordinates. If you embed an object at 0,0 it will be placed at the new origin. In this case you must embed it at -translation coordinates.

Even so, I had to increase the width and height. Why? I don't know. It doesn't seem to be a scale by 2. If someone knows I am curious to know.

<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 xmlns="http://www.w3.org/1999/xhtml" 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>
like image 154
R. Schifini Avatar answered Oct 21 '22 13:10

R. Schifini