SVG masks or some alternative?

svg

#1

Hi Hype community.

Is there any way to use svg as a mask. Maybe hard code it to group somehow? I need to create a logo animation and I’ve been searching myself senseless. Basically the logo is shaped like a “misformed” ellipse and i would like to mask of anything overboard.

Thanks in advance.


#2

It might not line up with the logo, but the easiest way to mask something in Hype is to use the “Content Overflow” “Hidden” option in an element. This can even be used with a “Group” to hide multiple elements.

To get custom shapes, the edges can be rounded.


#3

Ah yes. Thanks for the reply. The content overflow hidden feature I use daily, with rectangles, circles and anything between. All though I have had some browser compatibility issues with radius induced circle masks. I think most shapes are manageable with this, only if we could somehow combine multiple shapes as content overflow hidden masks.


(Hans-Gerd Claßen) #4

it’ll not be shown within hype only in browserpreview … svgClipping.hypetemplate.zip (12.5 KB)file


#5

Thank you Hans! It’s a huge leap forward for me but unfortunately it only renders properly on Firefox.

Screenshot here: http://imgur.com/9lAAoCH (1) Chrome (2) Firefox (3) Safari

Edit: I think I was maybe a bit lost for words with my last post as well. I know that multiple objects inside a group will be okay but what about a group outline made out of several shapes to produce a new shape (for instance like two circles would produce a “stereo” icon mask).


SVG masking SVG but how to animate the mask?
(Freelancer) #6

normally I use SVG

LIVE PREVIEW

in the Project you can see an example with an SVG mask. The apple logo :slight_smile:

svg_mask_apple_logo.hype.zip (126.9 KB)

You have to create a file in Adobe Illustrator PC-Mac / CorelDraw PC (or other similar app).
Copy the code of the svg file in a text field (inner HTML).
Use the same background color for filling.

hope this helps
Michelangelo


Masking question
Google chrome does not support MASK?
#7

That is perfect! Thank you so much!


#8

Hi. The last technique works well but is there any way to do basically the same thing but run animation behind that mask? Right now the background is limited to the “masks” solid colour.


Trying to figure out a Quick way to do masking?
(Lucky) #9

Hey,
This may help


#10

Thank you. This is a very good solution as well. Unfortunately there is no love for Edge: http://caniuse.com/#feat=css-clip-path

I will try this and let you know.


(Freelancer) #11

@Luckyde already seen, very interesting!
thanks


(Lucky) #12

Hmm well if you’re going for edge would making a version in canvas work? Or even raphaeljs which is svg but has ie support. But mind you is meant for basic things


(Alex) #13

Really great.

So, the trick is use HTML widget, and fill the same color to the SVG background?

Thanks.

Alex


(Alex) #14

I found that if the SVG mask image was exported from Sketch, it will support all browser automatically, I mean no need to fill background color for it manually.

Here is the Screenshot:

it is much convenient for people who are not familiar with code or photoshop

Alex


Google chrome does not support MASK?
(Freelancer) #15

yes, if you use the same color it works