Is it possible to tween an SVG <mask> cross browser compatible?

[Oliver16Years]

Hi everyone,

 

In this codepen demo I have made an <image> and a <mask> tag, and trying to tween the mask, which is working fine in Chrome but, in Firefox or in IE11, nothing happens.

 

See the Pen kkvzKN by oliver15years (@oliver15years) on CodePen

 

What the h... again!?  Shall I redraw the whole scene onUpdate somehow? Is there a way to animate masks in every current browser?

 

 

Thanks a lot!

 

 

 

 

Update: I think I have to rotate the item with svg transfrom like this:

 

See the Pen wzpOqG by oliver15years (@oliver15years) on CodePen

 

tl.to( a, 1, {attr:{ transform: "rotate( 45 )" } } ) 

tl.to( a, 1, {attr:{ transform: "rotate( 0 )" } } ) 

If I use CSS rotation not all browsers updating the svg composition. But how can I simply rotate an svg element without tranfroming it with translate and rotate and translate it back?

Edited October 6, 2016 by Oliver15Years

[Jonathan]

Hello Oliver15Years

 

That happens since your using a SVG <mask> element within a SVG <defs> element. Firefox and IE11 honor the spec, where as Chrome allows non standard behavior.

 

Check out this post for a better explanation

 

http://greensock.com/forums/topic/13681-svg-gotchas/#entry57408

 

[Oliver16Years]

I don't know. If I remove the <defs> still nothing happens in Firefox. Looks like I am unable to animate masks with CSS. Only with attr:{}
 

 

Lets suppose I am using the attributes plugin. Then I have problem finding the center of the element when I want to rotate it. 

 

tl.to( element, 5, { attr: { "transform": "rotate(360 150 150 )" } }, 1 ) 

 

I have to calculate the center point somehow. ( 150 150 ). Is there a way similar to transformOrigin to specify the rotation center in percentages?

 

Thanks.

[Jonathan]

SVG doesn't use percentages. If your applying in JS .. you can just get the width and height of your masked element and divide by 2.

 

Also make sure that you always declare your variables with var so the browser knows your intent on what is a variable.

 

And when declaring your id in the GSAP target never just use the variable namespace of the id.. it either should be a string "#a"  or use document.getElementById("a") .. the reason being is that the id attribute shares the same namespace as the name attribute. So you always want to be specific and declare your variables with var, and dont trust the browser window object to store the reference of your DOM element with an id name.

 

Your SVG is also a has a lot of white space in it you might want to run your SVG in a online SVG optimizer to clean it up.

 

https://jakearchibald.github.io/svgomg/

 

Basically anytime you have an ID in the DOM the browser will store that as a global namespace in the window object. So technically you could just use the id name without targeting the element with that id and defining as a variable. But i would advise against that since the ID namespace sometimes shares the same namespace as the name attribute. And its not really reliable to trust on the global namespace for id's in the DOM.

 

So i would just declare and define your variable so you can target the element with that ID. This way you can know for sure that the variable isn't shared and has a conflict with another variable name in the DOM. It is bad practice to trust named ids in the window object without declaring var in javascript

 

Please read the following regarding ID's with named access on the window object, which is being standardized in HTML5:

 

http://w3c.github.io/html/browsers.html#named-access-on-the-window-object

 

[Jonathan]

Also are you trying to animate the <mask> element or are you trying to animate <mask> elements child? The child of the
<mask> element can be animated like you were doing with the transform attribute inside the attr: {} object, since that <mask> element is within a <defs> element. But the actual <mask> element can not be animated, only its children that become masks can.

 

W3C <mask> spec: https://www.w3.org/TR/SVG11/masking.html#Masking

 

[Oliver16Years]

I am so happy using the id as a reference. I don't have to type these weird shifted charcters around my element names  every time, what is time and energy consuming, if I have an hour to come up with an animation. My banneres running in a separated iFrame and newer saw a name attirbute. When I realized, that I don't need to use var myA = document.getElementById('a'); just type a, i was the happyest tweener in the world. 36 characters vs 1. You wont get away this from me!!

The rotation center point is of course calculatable, with a few javascript line, since I am using a generator script which is making all this so called "human readable" code for me. I just looking for a simple and elegant solution.

According the white spaces. I like to waste a few kilobytes on space characters for a nicer xml, and gain it back with little more quanted .png assets.

 

I was trying to rotate the <mask> element's childs ofc. Not the mask element itself. At this point I have a stable, animatable svg mask engine by avoiding CSS and just touching attributes. This is working in all my browsers. The CSS tweening is only in Chrome.

 

Many thanks for dealing with my problem Jonathan

[Oliver16Years]

aasdfsdf

[Oliver16Years]

asdfasdef