2

I should apply SVG masks to few of images, but since this is the first time i am doing this, i ran into some problems. From the PSD, i exported the shape as PNG and then converted it to SVG using some online converter.

Using CSS, i applied the mask to the image, like bellow, and in Chrome and Safari it works properly, but on Firefox it doesnt (i am guessing on IE too).

<style>
.mask {
  -webkit-mask-box-image: url('http://imgh.us/mask_1.svg');
  mask-border: url('http://imgh.us/mask_1.svg');
}
</style>
<img src="http://www.record-lrc.co.uk/Downloads/Cinnabar%20-%20Tyria%20jacobaeae[18042011].jpg" class="mask">

You can see the Fiddle here https://jsfiddle.net/f5tzv9Lr/2/ (be sure to use Chrome). Can anybody suggest something or let me know what am i doing wrong?

UPDATE: From what i see, Mozilla has its own attribute, mask (https://developer.mozilla.org/en-US/docs/Web/CSS/mask), but it isnt working, at least in my case

This and that
  • 77
  • 9
  • The mask must be same domain as the thing it's masking. Is it? You'd need an SVG mask for mozilla, not a CSS mask. – Robert Longson Sep 23 '15 at 12:37
  • Yes, mask is on the same domain as the real image (not in this fiddle tough).Can you explain me the last part if im not asking too much? – This and that Sep 23 '15 at 12:44
  • a mask must point to an SVG `` element. See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking – Robert Longson Sep 23 '15 at 12:45
  • Tried to follow it (as well as some other example), but darn it, a newbie here. Thank you in any case! – This and that Sep 23 '15 at 13:06
  • Show me what you've got so far. – Robert Longson Sep 23 '15 at 13:09
  • I tried the second answer on this one (http://stackoverflow.com/questions/5887527/is-there-a-gecko-equivalent-to-webkit-mask-or-a-fancy-way-of-degrading-for-geck), but i am getting a blank space where the image should go. Like i said, i am a newbie, so i must be missing something important. – This and that Sep 23 '15 at 13:44
  • This is what i got (https://jsfiddle.net/cc6j1zuk/), but i doubt the mask points are correct, on the example they seem different. – This and that Sep 23 '15 at 13:56
  • @Thisandthat: Have you found any solution to that? – O. R. Mapper Apr 19 '17 at 12:17

0 Answers0