I'm using svg:foreignObject to create a formatted images on hover. The below strategy works perfectly in Chrome, but the foreignObject is not visible in Safari.
I just can't see it! What am I missing?
The code is given below -
<svg style="margin-top:18.5vw" version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1920 1299" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
<foreignObject width="465" height="465" x="308" y="33">
<video loop="" muted="" poster="1.jpg">
<source src="1.mp4" type="video/ogg">
<source src="src/uploads/<p>The filetype you are attempting to upload is not allowed.</p>" type="video/mp4">
</video>
</foreignObject>
<foreignObject width="465" height="465" x="785" y="0">
<video loop="" muted="" poster="src/assets/uploads/gallery_image_1580238733_10_1.jpg">
<source src="src/assets/uploads/460ef464541741014b1620c73c2fa2d7.mp4" type="video/ogg">
<source src="src/assets/uploads/<p>The filetype you are attempting to upload is not allowed.</p>" type="video/mp4">
</video>
</foreignObject>
</svg>
Any suggestions greatly appreciated.
you should encode the character to hex, but i don't know the reason right now!
function encodeSVG(svg) {
return svg.replace(/[\x00-\xff]/g, i => {
return `&#${i.charCodeAt()};`
})
}
Related
I am trying so many codes but I can not mask it with my SVG shape I am not sure is that my shape problem or code problem
HTML
<div class="banner">
<div class="imagearea">
<svg>
<defs>
<mask id="maskHome" maskUnits="objectBoundingBox">
<path id="Path_475" data-name="Path 475" d="M1172.467,599.6l17.558-22.785c16.862-22.349,22.338-31.236,22.556-47.2.228-22.556-18.232-39.429-42.623-39.429a50.965,50.965,0,0,0-13.2,1.929,288.486,288.486,0,0,0,44.137-153.3c0-160.258-130.089-290.337-290.347-290.337A289.868,289.868,0,0,0,620.188,338.818c0,.228.031.436.031.653-46.315,5.61-69.11,48.721-87.663,83.857-18.076,34.223-30.417,55.006-49.354,55.006s-31.288-20.783-49.364-55.006c-19.87-37.646-44.615-84.5-97.961-84.5s-78.06,46.854-97.92,84.51c-18.055,34.223-30.386,55-49.3,55s-31.267-20.772-49.323-55c-19.881-37.656-44.6-84.51-97.951-84.51v55.8c18.927,0,31.268,20.772,49.323,55,19.88,37.645,44.615,84.51,97.951,84.51s78.06-46.865,97.92-84.51c18.055-34.223,30.386-55,49.3-55,18.937,0,31.278,20.783,49.354,55.006,19.88,37.645,44.614,84.5,97.971,84.5s78.091-46.855,97.961-84.5c16.5-31.226,28.27-51.065,44.584-54.332,26.165,133.242,143.042,233.879,284.8,233.879,84.946,0,161.17-36.785,214.289-95.005,0,.083-.01.145-.01.228h32.366c-1.814-9.116,3.879-14.591,11.18-14.591,4.553,0,12.071,1.825,12.071,12.538,0,5.247-1.13,8.431-14.125,25.989l-52.662,70.666h100.761V599.6ZM910.546,487.782c-85.786,0-149.9-63.178-149.9-148.964s64.111-148.933,149.9-148.933c84.832,0,148.943,63.157,148.943,148.933S995.378,487.782,910.546,487.782Z" transform="translate(-41.382 -48.481)" fill="#000"/>
</mask>
</defs>
</svg>
<img class="maskHome" src="https://cdn.pixabay.com/photo/2017/04/24/13/37/architecture-2256489_1280.jpg"
width="100%" height="100%" />
</div>
</div>
CSS
.maskHome {
mask: url("#maskHome");
height: 200px;
width: 200px;
}
Codepan https://codepen.io/pagol/pen/PomGZdb
So i am trying to make a heading text animated with a background video playing within the letters. The code below is my solution which works perfectly on all browsers except safari. Im aware that safari only partially supports clip-path which is probably where the problem lies. I have been wrecking my head trying to think of a solution and need some ideas. Can the code below be altered to make it work on safari or is there perhaps another approach I can take to achieve the same outcome.
An example of what I am trying to achieve can be seen here https://levelup.gitconnected.com/animate-svg-text-with-a-video-background-bf1d03e47600
Scroll down to the life's a beach text with the video in the background.
Help is much appreciated!
<svg>
<defs>
<clipPath id="clip-00" clipPathUnits="objectBoundingBox" transform="scale(0.0013208333333333333, 0.002225925925925926)">
<path d="M741.58,421.68V373H613.37V313h71.39V264.7H613.37v-43H736.26V173.06H563.65V421.68Zm-206.13,0V173.06h-49V278.19c0,13.85.71,45.11.71,54.34-3.2-6.39-11.37-18.82-17.4-28.06L381.67,173.06h-47.6V421.68h49V312.29c0-13.85-.71-45.11-.71-54.34,3.19,6.39,11.36,18.82,17.4,28.06l91.28,135.67ZM267.31,297.73c0,50.43-23.09,78.49-57.9,78.49s-58.95-28.77-58.95-79.2,23.08-78.5,57.89-78.5,59,28.77,59,79.21m51.14-.71c0-80.27-44.4-127.86-109-127.86-65,0-110.1,48.3-110.1,128.57s44.4,127.85,109.39,127.85c64.64,0,109.75-48.3,109.75-128.56" />
<path d="M486.4,278.2c0,13.9,0.7,45.1,0.7,54.3c-3.2-6.4-11.4-18.8-17.4-28.1l-88.1-131.4h-47.6v248.6h49V312.3
c0-13.9-0.7-45.1-0.7-54.3c3.2,6.4,11.4,18.8,17.4,28.1l91.3,135.7h44.4V173.1h-49V278.2z" />
</clipPath>
</defs>
</svg>
<div class="video-container">
<video loop autoplay muted playsinline>
<source src="#" type="video/mp4">
<source src="#" type="video/webm">
<img src="#">
</video>
</div>
In my css file I have this -
video {
-webkit-clip-path: url(#clip-00);
clip-path: url(#clip-00);
I am trying to resize an svg image with a mask using css. The issue I am running into is with Safari as it doesn't seem to allow the CSS classes to override the default values. Here's the inline svg code:
<svg width="48" height="48" class="icon green">
<defs>
<mask id="svgmask-947">
<image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
</mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-947)" width="48" height="48" y="0" x="0"></rect>
The SVG won't resize, if I simple apply any class to it with a new width/height in CSS. Here's sample CSS:
.icon, rect, mask image {
width:24px;
height: 24px;
}
Applying the CSS in all other browsers works, just not Safari.
Thanks for any insight and help.
Found the solution as I was missing the viewbox attribute:
<svg width="48" height="48" class="icon green" viewBox="0 0 48 48">
<defs>
<mask id="svgmask-980">
<image class="svg-image" width="48" height="48" href="/themes/custom/assets/media/images/fa-png/campus.png"></image>
</mask>
</defs>
<rect class="icon-mask" mask="url(#svgmask-980)" width="48" height="48" y="0" x="0"></rect>
I have already did a one-day search before posting but with no luck
My problem:
I have a HTML5 video in a wrapper with a solid colour (e.g. blue) background (fig.1).
I want to apply a 2-colour .png 1440x900 image mask (fig. 2) over the video so to obtain, as a final result, a video with some transparent parts, corresponding to the black squares of the image mask (and the mask should scale proportionally with video, so as to be somehow responsive)
What actually happens
With the attempted solution (see below) I can see nothing (latest Chrome and Firefox): the page is completely blue coloured and the video starts
What I tried
I tried some demos found here and here but in both the examples the mask applied is not made with an image. Here's the basic code I'm trying.
<!DOCTYPE html>
<head>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
body {
background: #5a91b4;
}
div {
width: 1440px;
}
video {
width: 100%;
mask:url('#imask');
-webkit-mask:url('mask.svg');
}
</style>
</head>
<body>
<div>
<video autoplay controls>
<source src="http://www.html5multimedia.com/code/media/parrots-small.mp4" type="video/mp4">
<source src="http://www.html5multimedia.com/code/media/parrots-small.webm" type="video/webm">
</video>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 900">
<defs>
<mask id="imask" >
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
</body>
</html>
The mask.svg file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="vmask" preserveAspectRatio="xMinYMin"
viewBox="0 0 1440 900"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask>
<image width="1440" height="900" xlink:href="http://copy.com/TCImDzmSoq8CrU8W/mask.png"></image>
</mask>
</defs>
</svg>
I'm also open to evaluate a different approach to obtain the same effect.
Thank you in advance guys
If you convert your mask in pure SVG, it will work line in this demo http://jsbin.com/xejiko/1/edit
The svg is at http://jsbin.com/laday/1/edit
This is the mask.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 1440 899" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" transform="translate(720.000000, 449.000000) scale(1, -1) translate(-720.000000, -449.000000) " fill="#000000">
<path d="M0,830.648889 L0,-0.00222222222 L1440,-0.00222222222 L1440,830.65 L1440,853.1 L1440,898 L810,898 L180,898 L90,897.997778 L45,898 L0,898 L0,830.648889 L0,830.648889 Z M0,830.648889 L0,897.997778 L90,897.997778 L90,853.1 L90,808.2 L135,808.2 L180,808.2 L180,853.1 L180,897.997778 L1440,897.997778 L1440,830.65 L1440,808.2 L810,808.2 L180,808.2 L180,763.3 L180,718.4 L135,718.4 L90,718.4 L90,673.5 L90,628.6 L45,628.6 L0,628.6 L0,763.3 L0,830.648889 L0,830.648889 Z M1080,224.5 L1080,179.6 L1125,179.6 L1170,179.6 L1170,224.5 L1170,269.4 L1125,269.4 L1080,269.4 L1080,224.5 Z M1350,224.5 L1350,179.6 L1305,179.6 L1260,179.6 L1260,134.7 L1260,89.8 L900,89.8 L540,89.8 L540,44.9 L540,0 L990,0 L1440,0 L1440,134.7 L1440,269.4 L1395,269.4 L1350,269.4 L1350,224.5 Z M0,44.9 L0,0 L135,0 L270,0 L270,44.9 L270,89.8 L135,89.8 L0,89.8 L0,44.9 Z" id="Rectangle-1"></path>
</g>
</g>
</svg>
And in the css you call it
-webkit-mask-box-image: url(urlto/mask.svg)
Not sure about SVG but in CANVAS this would be easy. All you need to do is do is copy the video to the canvas and do the source-atop http://codepo8.github.io/canvas-masking/
Of course you'll run into the issue that you can not access the video that is not on the same domain :/
I have an SVG image that I would like to keep as a separate file to my main html file. I am trying to make it work as an embed tag but have problems with different view box behaviour.
Below is the code that works as I would like. The viewbox takes up as much space as possible without overflowing the window
<!DOCTYPE html>
<body style="overflow:hidden; margin:0" bgcolor="#E6E6FA">
<div>
<!-- <embed src="example.svg" type="image/svg+xml" /> -->
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 400 600">
<g stroke-width="2">
<rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
<rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
<rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
</g>
</svg>
</div>
</body>
When I replace this with the embed tag that references this exact same text. The viewbox fills the width so that overflows the vertical dimension of the window.
I have worked out the answer. By moving from a width attribute to setting the width in the style attribute the problem is resolved.
html file contains a div and embed with style set widths.
<body style="overflow:none; margin:0" bgcolor="#E6E6FA">
<div style="height:100%">
<embed src="example.svg" type="image/svg+xml" style="height:100%;width:100%"/>
</div>
</body>
And the SVG file contains the view box
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 400 600">
<g stroke-width="2">
<rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
<rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
<rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
</g>
There are still some odd behaviours when shrinking the window (it only resizes properly when the width is changed with the height) so if anyone has a better answer I would be keen to hear it