CODEWITHSUNDEEP
csssvg
Matt Lipman
Matt Lipman

Reputation: 152

Firefox SVG transform-origin fix ruins another part of my animation

My animation was broken in Firefox and the answer to get it working was:

svg * { transform-box: fill-box; }

However, the fix also broke a working part of my CSS animation. I tried removing the styling like so, which doesn't work:

#eye * { transform-box: none; }

SVG section it is ruining:

<g id="eye">
  <path ...>
  <ellipse ...>
</g>

How do you override the transform-box fix for a specific element?

Upvotes: 1

Views: 144

Answers (2)

Matt Lipman
Matt Lipman

Reputation: 152

Jack had a working answer to not apply the fix globally, instead, target the SVG shapes that need the fix with a class. I stuck with the global fix, because it fixed 6 shape animations, and messed up only one. I then reverted back with "transform-box:view-box".

svg * { transform-box: fill-box; }
svg #pig-eye * {transform-box: view-box;}

I found the info here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box

Upvotes: 0

Jack
Jack

Reputation: 667

Give the element(s) in the SVG that needs fixing a class and then specify that in the CSS instead of applying the transform-box: fill-box as a global for the whole SVG

<svg>
  <g id="eye">
      <path ...>
      <ellipse ...>
  </g>
  <g class="brokenElement">
      <path ...>
      <ellipse ...>
  </g>
</svg>

Then in the CSS

.brokenElement { transform-box: fill-box; }

Upvotes: 2

Related Questions