alexlii
(Alex)
November 10, 2017, 4:03am
1
Hello,
A animation works well with Mac Safari, In this animation, there are Grouped SVG image as an MASK with Hidden setting in Content overflow option.
but when I open it with Google Chrome, the hidden background images will show up.
What I am want to confirm is whether Google Chrome does not support SVG MASK? Any suggestion on this situation?
Thanks.
Alex
Rick4F
(Rick)
November 10, 2017, 7:32am
2
If you had used the search function, top right (magnifying glass) and had typed in "svg mask" you would had seen many topics on this. Think these 2 answer your question best:
the clipping is not properly supported in all browsers (or slows the page).
anyway,You can use a big mask in svg to cover the scene, but with flat/gradient color only
Doh as I feared. I have found clip-path doesn’t work if you’re masking an image element BUT if you mask an SVG element that has the tag within it that will work across all browsers So SVG masking SVG (with image included) is fine. SVG masking anything else isn’t 100%.
Guess I’ll have to go the javascript route. Pity as if that worked would be perfect.
alexlii
(Alex)
November 10, 2017, 2:37pm
3
it is pity if the above quote is right answer....
Alex
alexlii
(Alex)
November 10, 2017, 4:07pm
4
Thanks.
I think I got the right way to do it:
normally I use SVG
[image]
LIVE PREVIEW
in the Project you can see an example with an SVG mask. The apple logo
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.
[image]
hope this helps
Michelangelo
Use Html widget of Hype for the SVG mask image, and then fill the same color of SVG image to the background of SVG mask image.
By this way, the SVG mask will support all browser.
Alex
alexlii
(Alex)
November 10, 2017, 5:17pm
5
I found even more easy way to do that:
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
Alex