I'm trying to define a clip-path do a given element.
On Chrome there aren't problems (thanks polygon!), but on Firefox I can't find a way to obtain the same result using the url alternative.
This clip-path will just cut the entire element on Firefox, and I can't find a way to make it work the proper way.
As you can see, it should use relative values.
css:
.element {
clip-path: url(../jobs-shape.svg#path);
clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 100%);
}
svg:
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<clipPath id="path">
<polygon points="0 0, 1 0.15, 1 1, 0 1" />
</clipPath>
</defs>
</svg>
What am I doing wrong?
Ah! Nevermind, found the solution.
I have to use clipPathUnits="objectBoundingBox":
<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="path" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 1 0.15, 1 1, 0 1" />
</clipPath>
</defs>
</svg>
Related
I need to create curve Responsive SVG background, with two color.
i Tried this below code:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100% 100%" class="hidden-xs hidden-sm">
<defs>
<clipPath id="clip-Nye">
<rect width="100%" height="100%"/>
</clipPath>
</defs>
<g id="Nye" data-name="Nye" clip-path="url(#clip-Nye)">
<rect width="100%" height="100%" fill="#fff"/>
<path id="Rectangle" d="M0,453.226,817.641,0s696,663.078,406.715,730.84q-335.194,78.515-815.961,459.149C142.369,1400.607,0,453.226,0,453.226Z" transform="matrix(-0.485, 0.875, -0.875, -0.485, 1914.704, 197.622)" fill="#01b0f0"/>
</g>
</svg>
The Issue is that, when i minimize page with CTRL + -, SVG not show properly and side show blank.
what i do wrong? any idea?
You can try the use of radial-gradient:
body {
margin:0;
height:100vh;
background:radial-gradient(100% 200% at left,white 50%,#01b0f0 50.1%);
}
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.
On an element with a background (image or solid color don't really matter):
<header id="block-header"></header>
I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:
<header id="block-header">
…
<svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
…
</header>
You can run the code snippet below or check the JSFiddle. You can see original SVG image (in black) put inline, having curviness along the bottom and being responsive. In contrast, the red rectangle shows the same image applied (or, rather, not applied) as a clip-path.
I guess I misunderstand either viewBox or preserveAspectRatio attributes though can not find what is exactly wrong here. Any help would be appreciated.
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
</header>
References to SVG clip paths are to the clip path definitions themselves and the dimensions or other attributes of the <svg> are meaningless in this context.
What is happening in your example is that you are applying a 4000 px wide clip path to your header. Which is probably only of the order of 900 px wide. So the curvature isn't visible.
If you want a responsive clip path, you should define it using clipPathUnits="objectBoundingBox".
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
</clipPath>
</defs>
</svg>
</header>
Fiddle here
I have this snippet for cicrle-masking.
It works on Chrome.
But how to run it on Firefox and IE ?
Please no radius-borde solution...
.circle {
-webkit-clip-path: circle(100px at 100px 100px);
clip-path: circle(100px at 100px 100px)
}
<img src="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg" width="1024" height="768" alt="" class="circle"/>
.circle {
-webkit-clip-path: circle(50% at 50% 10%);
clip-path: circle(50% at 50% 10%);
}
Well IE doesn't support the CSS clip-path at all and Firefox only supports the url method so that solution is pretty much a dead end - http://caniuse.com/#feat=css-clip-path
However you could use inline SVG to clip an image as it has great browser support - http://caniuse.com/#search=inline%20svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" xml:space="preserve" width="200px">
<defs>
<!--defines the shape to use for clipping-->
<circle id="circle" cx="100" cy="100" r="100" />
</defs>
<clipPath id="clip">
<!--creates the clipping mask from the shape-->
<use xlink:href="#circle" overflow="visible"></use>
</clipPath>
<!--group containing the image with clipping applied-->
<g clip-path="url(#clip)">
<image overflow="visible" width="768" height="432" xlink:href="http://cp91279.biography.com/Leonardo-da-Vinci_A-Divine-Mind_HD_768x432-16x9.jpg"></image>
</g>
</svg>
Working example - http://codepen.io/taneleero/pen/BNZjdj
UPDATED WITH SVG CODE AS REQUESTED!
I am using the following CSS code in a website:
#page-body {
background: url("/images/background/map_gradient.svg") repeat fixed 50% 0 / 100% 1500px, url("/images/background/map_img.jpg") no-repeat scroll 50% 0 / 2060px 1010px rgba(0, 0, 0, 0);
}
SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" preserveAspectRatio="none" xml:space="preserve">
<radialGradient id="SVGID_1_" cx="50" cy="0" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#000000;stop-opacity:0"/>
<stop offset="0.5" style="stop-color:#000000;stop-opacity:0"/>
<stop offset="1" style="stop-color:#000000;stop-opacity:0.3"/>
</radialGradient>
<rect y="-50" fill="url(#SVGID_1_)" width="100" height="100"/>
<rect y="50" width="100" height="50" fill-opacity="0.3"/>
</svg>
A desktop screenshot:
And a mobile screenshot:
I know this isn't a responsive CSS code problem because i can get the same result when i drag the window from pc display to an old hdmi TV display. Can you please suggest me a workaround ?