I'm trying to get a video mask of some text, overlayed on top of another instance of video. I've achieved the desired effect in FF:
The Text overlay masking the an instance of the same video it is overlayed on top of. I used the following code to do this:
<video id="bkg" src="/locations.mp4" autoplay loop></video>
<svg class="svg" xmlns="http://www.w3.org/2000/svg">
<clippath id="cp-circle">
<text
text-anchor="middle"
x="50%"
y="98%"
>TEXT TEXT</text>
</clippath>
<g clip-path="url(#cp-circle)">
<foreignObject width="853" x="0"
y="0" height="480">
<body xmlns="http://www.w3.org/1999/xhtml">
<video id="bkg2" src="/locations.mp4" autoplay loop></video>
</body>
</foreignObject>
</g>
</svg>
<script>
document.getElementById("bkg").playbackRate = 0.8;
</script>
In Chrome this simply renders the two videos on top of each other, with no masking. Any idea why or if there is a workaround?
Chrome does not support SVG foreignObject correctly. WebKit bug (Filed). See http://svgdesign.guru for example.
Related
I have an iframe inside a foreignObject inside a g inside a svg, like in the following code:
<svg width="1024" height="1024">
<g transform="translate(240, 240)">
<foreignObject width="300px" height="200px">
<div
style="height: 200px; width: 300px; background-color: blue;"
/>
</foreignObject>
</g>
<g transform="translate(240, 240)">
<foreignObject width="300px" height="200px">
<iframe
width="300"
height="200"
src="https://www.openstreetmap.org/export/embed.html">
</iframe>
</foreignObject>
</g>
</svg>
I would expect the iframe to be rendered at the position specified by the parent g's transform the same way the div is, but instead it renders at the origin of the page.
Here is the same code on CodePen.
EDIT: I can see this happening on Chrome and Safari on Mac. It is working fine on Firefox.
How can I make the iframe render in the correct position?
I'm using an SVG with a mask to create a mask effect (it needs to be working from IE11+). I have a sequence in a PNG that I use a a mask and animate the X attribute. It works fine in all browsers and the animating works in IE but the scaling of the mask it off, the proportions change. It's like it's 1/3rd of it's original width, even though the width is set.
How it should look:
https://i.imgur.com/kF4YcMf.jpg
How it looks:
https://i.imgur.com/O0XUqb0.png
My SVG code
<svg width="640" height="360" baseProfile="full" version="1.2">
<defs>
<mask id="svgMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
<image id="maskImage" width="35840" height="360" xlink:href="assets/img/mask-high.png" y="0" x="-6400"/>
</mask>
</defs>
<image id="titleImage" width="640" height="360" xlink:href="assets/img/doggy.jpg" mask="url(#svgMask)" y="0" x="0"/>
</svg>
I am trying to render an image inside a circle with svg. This works on chrome, but not other browsers, what am I doing wrong?
I have included several possible ways of specifying the link to the image, href= is what works with chrome. I can't get any of these to work elsewhere. If I change the fill to #000 it fills with black - so the problem is in the pattern.
<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
width="206.440673828125">
<image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
</pattern>
</defs>
<circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>
You need to specify the height and width of your image.
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?
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>
Sorry if I'm not going about this the right way. I am trying to embed HTML within an SVG shape, and trying to center align the HTML with the shape.
Here is my code:
<svg xmlns = "http://www.w3.org/2000/svg" class="shape1" width="200" height="200" style="margin-top:-100px;">
<circle cx="100" cy="50" r="100" fill="white">
</circle>
<foreignObject x="0" y="80" width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<h3 style="font-family:'myriad Pro' ">HOME</h3>
</div>
</body>
</foreignObject>
</svg>
As it stands, I have to do it manually, but it does not seem to be consistent across Chrome and Firefox.