Animating SVG rect x property via CSS

Question

I have a classic mobile three-bars menu button made with SVG. I would like to animate each bar on click.

This is my code:

$('#menu_button').click(
  function() {
    $(this).toggleClass('open');
  }
);

#menu_button .rectangle {
  left: 0;
  x: 0;
  transition: all ease 1s;
}
#menu_button .rectangle.first {
  transform: rotate(0deg);
  top: 0;
  y: 0;
}
#menu_button .rectangle.second {
  transform: rotate(0deg);
  transform-origin: 8px 9px;
  top: 6px;
  y: 6;
}
#menu_button .rectangle.third {
  transform: rotate(0deg);
  transform-origin: 11px 9px;
  top: 12px;
  y: 12;
}
#menu_button.open .rectangle.first {
  top: 23.2px;
  y: 23.2px;
}
#menu_button.open .rectangle.second {
  transform: rotate(405deg);
}
#menu_button.open .rectangle.third {
  transform: rotate(495deg);
  left: 0;
  x: 0;
  top: 8px;
  y: 8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="22" height="35" id="menu_button" class="hidden-sm hidden-md hidden-lg">
  <rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle first" width="22" height="2" x="0" y="0" />
  <rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle second" width="22" height="2" x="0" y="6" />
  <rect style="opacity:1; fill:#eb671f; fill-opacity:1;stroke:none;" class="rectangle third" width="22" height="2" x="0" y="12" />
</svg>

JSFiddle for those like me who can't run the snippet: https://jsfiddle.net/9rkoLcx8/2/

The issue is with Firefox.

I mean, everything is working fine on Chrome and Opera, this doesn't work on Safari (it has no animation but it's still ok as it doesn't break things up), and works half in firefox: it rotates correctly but doesn't animate the x and y of SVG rects.

This is what I think: x and y are rect attributes, not CSS properties, so not only they shouldn't work on Firefox, they shouldn't work on Chrome and Opera too. That's why I added top and left, but it still doesn't work.

Is there a way to make the animation of x and y work in Firefox too?

This is a known (and long standing. and very irritating) Firefox bug when using `transform-origin` http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox — Turnip, May 01 '16 at 16:19
@Turnip I already saw that question, and tried adapting the code like the answer says with no luck...... — BackSlash, May 01 '16 at 16:21
Actually it's not the same that I was thinking of. More likely this: http://stackoverflow.com/a/35660209/746736. — Turnip, May 01 '16 at 16:30
Try looking into [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#translate()) — Bogdan Kuštan, May 01 '16 at 16:45
@RobertLongson yes, i corrected myself in a later comment (by linking to an answer of yours by coincidence) — Turnip, May 02 '16 at 10:35

Animating SVG rect x property via CSS

0 Answers0