I have some svg masked images that work perfectly in Chrome but does not work in Firefox. Basically my svg gives a shape to the image that the css is applied to and the end result is this .
This is my svg code
<svg width="0" height="0" viewBox="0 0 160 160">
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
</svg>
<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
And this is my css
* {
padding: 0;
margin: 0;
}
.photo_rectangle_inverse {
height: 160px;
width: 170px;
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
Here is a Jsfiddle of all that. This works perfectly in Chrome but not In the latest version of Firefox as at now on windows (FF 40.0.2) .
I went to this Firefox article but could not find why this is not working in Firefox ?
How to make this svg masked image compatible with firefox ?
Thanks
Related
I've created an svg for use as a clip-path on an image, and it appears perfect in Firefox, however it doesn't work in Chrome, and I'm wondering what the problem is.
Chrome should support an inline svg clip-path according to this.
And full support according to MDN.
<style>
img {
width: 40%;
height: auto;
display: inline;
}
.clip {
-webkit-clip-path: url('#clip');
clip-path: url('#clip');
}
</style>
<p>Left image should be clipped, right image is not.</p>
<img src="https://i.imgur.com/nnHdzO6l.jpg" class="clip">
<img src="https://i.imgur.com/nnHdzO6l.jpg" >
<svg version="1.1"
baseProfile="full"
height="400" width="400"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip"
clipPathUnits="objectBoundingBox"
transform="scale(0.0025, 0.0025)">
<!-- https://css-tricks.com/scaling-svg-clipping-paths-css-use/ -->
<circle cx="50%" cy="50%" r="50%" />
<rect width="82.8%" height="82.8%" y="17.2%" x="8.6%" />
</clipPath>
</defs>
</svg>
External SVG files are not supported by Chrome at the moment.
You can check this here:
https://caniuse.com/#search=CSS%20clip
Here is what they say about the Partial support for Chrome:
Partial support refers to supporting shapes and the url(#foo) syntax
for inline SVG, but not shapes in external SVGs.
I'm trying to create an Angular 5 app that consists of a masked/clipped image.
In plain ol' HTML + CSS, I can achieve what I want with the following code pen: https://codepen.io/earthican/pen/BJjgRv
body,
html,
.img {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: white;
overflow: hidden;
}
svg {
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
background: transparent;
fill: transparent;
mask: url(#polygon-mask);
}
<svg id="mask">
<defs>
<mask id="polygon-mask" x="0" y="0" width="960" height="588" >
<rect id="reverse-mask" fill="white" x="0" y="0" width="960" height="588" ></rect>
<polygon fill="red" points="112,62 162,112 162,162 62,162 62,112"></polygon>
</mask>
</defs>
<rect width="960" height="588" fill="teal"></rect>
</svg>
<div class="img">
<img src="https://i.pinimg.com/originals/53/5e/5b/535e5b3744dbb8264a7ebba5f29f44ca.jpg" style="margin-left: 0px; margin-top: 0px;">
</div>
However, I'm having trouble trying to convert the above to Angular. Here's what I have so far: https://plnkr.co/edit/w2gVe91NEIdUlCWs3qkN?p=preview
I think I'm starting to realize that Angular doesn't play very well with SVG. I should also point out that I'm fairly new to Angular 2+ and SVG, so I can't really be sure. If anyone can help or point out some useful resources, that will be greatly appreciated!
I have solved this by moving the mask attribute from CSS to the SVG tree, i.e.:
<svg mask="url(#polygon-mask)">
...
</svg>
I can't understand why the code below isn't properly rendered on iPad (Safari and Chrome) while it's ok on iPhone (Safari), Android, pc.
The button is there on iPad* -- if I tap in the bottom right corner actually I trigger the action -- just the button is not visible.
I use linux, so debugging on iPad came out to be tough... any advice?
<div id="print-button">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 104 104">
<circle r="50" cx="50" cy="50"></circle>
<path d="M25 ... " transform="matrix(0.65,0,0,0.65,17.5,17.5)"></path>
</svg>
</div>
<style>
#print-button {
width: 5.5rem;
height: 5.5rem;
cursor: pointer;
position: fixed;
right: 2%;
bottom: 2%;
}
</style>
(*) sorry for providing the real link rather than recreating the whole thing in a js fiddle, I hope it does not break any rule.
About this being a duplicate question of ... (see comment below)
Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg
This is my svg code
<svg width="0" height="0" viewBox="0 0 160 160">
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
</svg>
<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
And this is my css
* {
padding: 0;
margin: 0;
}
.photo_rectangle_inverse {
height: 160px;
width: 170px;
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
Since the svg was not working in Internet Explorer (IE 11), after reading this article that talks about compatibility issue with Browsers, I added
<meta http-equiv="X-UA-Compatible" content="IE=edge">
To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.
But still the svg shape is not displaying.
Here is a Jsfiddle . Note Jsfiddle does not allow meta tag
How to make an svg masked image compatible with Internet Explorer ?
Tks
IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an HTML <img> element e.g.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
.photo_rectangle_inverse {
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
<svg height="100%" width="100%" >
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
<image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/>
<image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
</svg>'
This is a real css-challenge, I don't think this is possible:
I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:
fiddleLink
Any help appreciated
You can use svg to achieve this effect: http://jsfiddle.net/xTd6Y/4/
<div id="image-wrapper">
<svg id="svg-1" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-1" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/300" />
</svg>
<svg id="svg-2" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-2" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/301" />
</svg>
<svg id="svg-3" class="clip-svg">
<rect class='svg-background' width="300" height="300" fill="#ffffff" />
<image id="img-3" class='svg-image' width="300" height="300" xlink:href="http://lorempixel.com/300/302" />
</svg>
</div>
<svg id="svg-defs">
<defs>
<clipPath id="clip-triangle">
<polygon points="0, 200 100, 0 200, 200"/>
</clipPath>
</defs>
</svg>
css
body {
background-color: #e0e0e0;
}
#image-wrapper {
position: relative;
}
.svg-background, .svg-image {
clip-path: url(#clip-triangle);
}
.svg-image {
visibility: hidden;
}
.clip-svg .svg-image:hover {
visibility: inherit;
}
/* size and positioning */
svg.clip-svg {
position: absolute;
height: 250px;
width: 250px;
}
#svg-1 {
top: 110px;
left: 50px;
}
#svg-2 {
top: 40px;
left: 140px;
}
#svg-3 {
top: 160px;
left: 250px;
}
The clipping path is defined in svg#svg-defs, and can be set to whatever you like.
Image attributes are visible to / accessible by js and css.
You can apply the clipping path to any html element with css of
myElement {
clip-path: url(#clip-triangle);
}
but this is only reliable on firefox so far as I can tell.
Note: solution only tested on FF and chrome
note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area