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 :/
Related
I edited my initial cry of despair into something more to the technical point, in order to turn it into a Q&A.
I'm using SVG symbols that I reference in the document with use elements. I'm styling these with CSS. I don't want to set both height and width in the CSS, I want to set only one of them with the other one scaling accordingly.
I do set a viewBox attribute on the symbol. But the graphic does not scale correctly.
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body>
<svg style="display:none;">
<symbol id="scary-smiley" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
The code below has been tested in current Firefox, Chrome and a Webkit-based browser named Midori.
For some reason, defining the viewBox on the symbol element does not have the full desired effect in Firefox and Chrome. It does have some effect, though, as it makes the element scaleable. So, if you want set both width and height in CSS, you can do that.
If the viewBox element is specified only on the symbol and you set only one of width or height, then in Firefox and Chrome the other dimension is set according the default object size in HTML 5 whis is 300x150 px. So, in the example in the question, you get a 500x150 px element and the graphic is scaled to fit that rectangle.
If you want to define only one width or height with the other one scaling accordingly, then defining viewBox on the referencing SVG element works:
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="display:none;">
<symbol id="scary-smiley">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large" viewBox="0 0 20 20">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>
Firefox' and Chrome's behaviour is standard compliant, according to the SVG 2 specification, according to which the <svg><use .../></svg> clause establishes a new SVG viewport.
I have an external SVG file with an inline stylesheet like so:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300.00006 244.18703" height="244.19" width="300" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<style type="text/css"><![CDATA[
svg, svg * {
pointer-events: all;
}
svg g {
transition: fill 0.2s;
fill: #303030;
}
svg:hover g {
fill: #6CADDE;
}
]]></style>
</defs>
<g style="" transform="translate(-539.18 -568.86)">
<path d="m633.9 812.04c112.46 0 (...) 27.464"/>
</g>
</svg>
When I open this file by itself in Firefox, it works just as intended. However, if I use an element in an HTML file as <img src="image.svg"> and link it to the SVG, then the hover animation does not trigger. What am I doing wrong?
To get this working you need to insert the SVG in HTML code itself.
Adding an external SVG using src will only allow adding CSS to the overall SVG element and not the interior subtags.
also, can you show some more code? So that it will be better to understand the problem well.
eg:
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
<style media="screen">
circle:hover{
fill: blue;
}
</style>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
I want to cut the image. And used clip-path for this. That worked fine for Safari and Chrome but not Firefox. I searched all questions in this website and this is the last shape of my code. But still couldn't make it works on Firefox.
This is my image:
<img src="images/ex-board.jpg" alt="First slide image" class="sliderimg">
And this is my CSS:
.sliderimg {
width: 100%;
height: 357px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
/*Firefox*/
clip-path: url("#slider-poly");
}
And finally added this to my index file:
<svg width="0" height="0">
<defs>
<clipPath id="slider-poly" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0, 1 0.85, 0 1" />
</clipPath >
</defs>
</svg>
But still that is working on Safari and Chrome, but not Firefox.
I think you have three options for Firefox support (I have tested all three):
Using an absolute path.
Referring to an external svg file. Use a correct svg document format: https://www.w3.org/TR/SVG/struct.html
For example:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<defs>
<clipPath id="slider-poly">
<polygon points="100,0 300,0 200,200"/>
</clipPath>
</defs>
</svg>
In your stylesheet:
clip-path: url(filename.svg#slider-poly);
Using an internal stylesheet.
Spec says it must be a <clipPath> element. Your markup contains <imagePath>, which as far as I can tell is not even valid SVG. Which means safari and chrome are not spec-compliant.
I have read all post in here about styling my svg fill color with CSS but without luck.
What I want is to able to make an icon with a link. My external svg file is grey, but I would like to make it red with css and change color to yellow when hovering.
I think I am targeting the SVG wrong. Please help. My test is here:
testpage
<%#LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<style type="text/css">
<!--
.svgicon {
fill: red;
}
.svgicon:hover {
fill: yellow;
}
-->
</style>
<body>
<table width="100%" border="0" class="tabelform">
<tr>
<td width="100%"><object type="image/svg+xml" data="S/Images/new.svg" height="18" width="18"></object>test icon</td>
</tr>
</table>
</body>
</html>
Answer a little overdue, but worth having for reference for others.
Basically, the only type of SVG usage which can be used in conjunction with CSS is the inline usage.
This means you would literally put your SVG markup directly into the HTML source as follows:
<div class="my-svg">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
</div>
NOTE: This SVG has been optimised using SVGO and then manually edited to include and ID
You can now control the SVG using CSS like so:
.my-svg {
fill: pink;
}
.my-svg:hover {
fill: red;
}
currentColor
You can also use the currentColor keyword in the SVG to apply a colour to certain elements of it, for example:
<div class="my-svg">
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</div>
.my-svg {
color: red;
}
JS Fiddle
This can be handy if you need to use the same SVG across different websites / themes, such as dark and light, for easily switching SVG colours with CSS.
Caching / performance consideration: SVG cloning
You should also keep in mind, it's not a good idea to use inline SVG for repetitive images, such as icons, because they can not be cached (the SVG code will be repeated throughout your HTML, increasing the ultimate file size).
Instead, one approach I like to use is to create an SVG index at the top of my page, which contains all the SVGs I want to use on the page, for example:
<svg xmlns="http://www.w3.org/2000/svg" class="svg-index">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG-dropdown-icon" viewBox="0 0 15 11">
<title>
Expand
</title>
<path d="M1.758 1L7.5 6.582 13.242 1 15 2.709 7.5 10 0 2.709z"/>
</svg>
<svg id="SVG-active-icon" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
<title>
Current Event
</title>
<g fill="none" fill-rule="evenodd">
<circle class="activeEventPulse" stroke="currentColor" fill="#EBEBED" cx="12.5" cy="12.5" r="11.5"/>
<ellipse fill="currentColor" cx="12.5" cy="12.5" rx="4.5" ry="4.5"/>
</g>
</svg>
</svg>
Make sure you set the SVG index to display: none so it doesn't show up on the page.
You can now reuse these SVGs repetitively throughout the page using the xlink:href attribute as follows:
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="active">
<use xlink:href="#SVG-active-icon" />
</svg>
<svg class="dropDown">
<use xlink:href="#SVG-dropdown-icon" />
</svg>
JS Fiddle
This is called cloning, and allows you to take advantage of cacheable SVGs which can be controlled with CSS!
Hope this helps!
try to use inline svg instead of external svg source then you can control
I have this SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="1px" height="100%" viewBox="64 0 1 26" enable-background="new 64 0 1 26" xml:space="preserve">
<defs>
</defs>
<path id="Outer_dark_border_1_" opacity="0.8" fill="#2F5870" d="M244,0H12C5.373,0,0,5.373,0,12v218v14v12h12h232h12v-12v-14V12
C256,5.373,250.627,0,244,0z M255,225v5v25H1v-25v-5V12.906C1,6.331,6.331,1,12.906,1h230.188C249.669,1,255,6.331,255,12.906V225z"
/>
<path id="Outer_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M243.094,1H12.906C6.331,1,1,6.331,1,12.906V234v9.094V255h11.906
h230.188H255v-11.906V234V12.906C255,6.331,249.669,1,243.094,1z M254,24v230H2V24V13C2,6.925,6.925,2,13,2h230
c6.075,0,11,4.925,11,11V24z"/>
<linearGradient id="Top_gradient_2_" gradientUnits="userSpaceOnUse" x1="128" y1="24" x2="128" y2="2">
<stop offset="0.48" style="stop-color:#427B9D"/>
<stop offset="0.52" style="stop-color:#5D8EAB"/>
</linearGradient>
<path id="Top_gradient_1_" opacity="0.8" fill="url(#Top_gradient_2_)" d="M243,2H13C6.925,2,2,6.925,2,13v11h11h230h11V13
C254,6.925,249.075,2,243,2z"/>
<path id="Inner_dark_border_1_" opacity="0.8" fill="#2F5870" d="M8,25v223h240V25H8z M247,247H9V26h238V247z"/>
<path id="Inner_light_border_1_" opacity="0.8" fill="#8DAFC4" d="M7,24v225h242V24H7z M248,248H8V25h240V248z"/>
<polygon id="Solid_border_1_" opacity="0.8" fill="#427B9D" points="249,24 249,249 7,249 7,24 2,24 2,254 10,254 254,254 254,246
254,24 "/>
<rect id="top_1_" x="64" fill="none" width="1" height="26"/>
</svg>
and this HTML file:
<!DOCTYPE html>
<html>
<body>
<div style="background: url(top.svg); width: 900px; height: 100px;">
asd
</div>
</body>
</html>
and the result looks like this:
What I want is the SVG to stretch to the container. As you can see from the "asd", it only stretches the SVG horizontally, and centers vertically. I have tried to play around with dimensions and I have really no idea how to accomplish this.
So, to be clear: I want the blue bar to fill the entire div, so that ASD is in the top of it.
Update: when I change the height of the SVG from height="100%" to height="26px", then it looks like this:
I am almost there, but still not there.
and when changing width and height of svg element both to 100%, it looks like this which is not correct:
I solved my problem with CSS background-size: 100% 100%.