Translate an SVG g Element doesn't work

[SlimMarten]

Hi, I am trying to translate an group element <g> with greensock, but somehow it is not working. If I don't use the attrPlugin, it's not working in IE 11 and up 

 

this is my svg:

<svg viewbox="0 0 350 350"><mask id="silhouette">
<g filter="url(#sharpen)">
<g filter="url(#blur)">
<rect x="-25" y="-25" width="400" height="400" fill="#000"></rect>
<circle cx="175" cy="175" r="40" fill="#fff"></circle>
<g class="move" widht="350" height="350">
<circle class="" cx="120" cy="115" r="25" fill="#fff"></circle>
</g>
</g>
</g>
</mask></svg>

and this is how I try to move the group with the class "move"

TweenMax.to(target, duration,{
attr:{
transform: "translate(100,0)"
}
});

The transform values actually become applied, but the group is not moving. I tried moving  a group via transform and translate property before and it changes position if I enter a translate value by default.

 

 

What am I missing here?

[Carl]

You can do x and y translations without the AttrPlugin like so:

TweenMax.to(".move", 3,{x:300});

http://codepen.io/GreenSock/pen/JbKGRp

 

 

If you need more help please provide a reduced demo with the least amount of code necessary to replicate the problem.

Your SVG appears incomplete as the filters and mask aren't defined anywhere.

[SlimMarten]

@Carl , please have a look at this demo.

 

See the Pen GNqYXN by anon (@anon) on CodePen

[OSUblake]

What's the issue? That looks correct.

[SlimMarten]

its not working in IE 11 and up

[OSUblake]

It's working correctly, Chome is incorrect.

[SlimMarten]

can't confirm that, my demo is working in chrome as expected but not in IE.

See the Pen GNqYXN by anon (@anon) on CodePen

[OSUblake]

Look in Firefox. 

[SlimMarten]

oh well, okay in firefox its also not working... but why, what's wrong?

[OSUblake]

It's hard to say without knowing what you're trying to do, but try applying the filter to the group or the individual element.

<g class="move">
  <circle class="" cx="120" cy="115" r="27" fill="#fff" filter="url(#outline)"></circle>
</g>

[SlimMarten]

I am trying to constantly draw an outline arround all my SVG objects silhouette. Drawing an outline arround a single object is not doing the trick, since objects in my svg are overlapping, and I want the outline to wrap arround my objects..

 

 

[OSUblake]

Ok, that makes more sense. You can't use transforms on stuff inside of <defs> tags. Chrome will allow this behavior, but it's not correct. You would need to tween the attribute of your circle like this...

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

[SlimMarten]

that is actually what I was afraid of since I have a lot of groups in my current project. And as far as I know, moving <g>'s with the attribute "cx" or "cy" is not possible at all

[OSUblake]

Unfortunately, the only way to move a group is with a transform. You can try playing around with tweening the x and y attributes of a mask, but I can't say for certain that it will result in the correct behavior.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask