title: SVG transform origin and box with small viewBox and floated numbers
body: <h1>Definition</h1>
  
  <p>In Firefox in order to have real <code>transform-origin: center</code> we have to add <code>transform-box: fill-box</code>. It works very well in casual situations, but there are some problems.</p>
  
  <p>When we have small svg's viewBox (eg. <code>&lt;svg viewBox="0 0 10 10"&gt;</code>) and we have to use floated numbers in order to provide exact center position in svg space there is some strange behaviour — <code>fill-box</code> is ignored.</p>
  
  <h1>Example</h1>
  
  <p><a href="https://jsfiddle.net/6jckL4ne/" rel="nofollow noreferrer">https://jsfiddle.net/6jckL4ne/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes animRotate {
   from {
    transform: rotate(360deg);
   }
  }
  svg {
   background-color: pink;
  }
  .spin {
   animation: animRotate 3s infinite;
   transform-origin: center;
   transform-box: fill-box;
   fill: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 1 1"&gt;
    &lt;rect class="spin" height=".5" width=".5" x="0.25" y="0.25"/&gt;
   &lt;line x1="0.5" x2="0.5" y1="0" y2="1" stroke="black" stroke-width="0.01"&gt;&lt;/line&gt;
   &lt;line x1="0" x2="1" y1="0.5" y2="0.5" stroke="black" stroke-width="0.01"&gt;&lt;/line&gt;
  &lt;/svg&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 100 100"&gt;
    &lt;rect class="spin" height="50" width="50" x="25" y="25"/&gt;
   &lt;line x1="50" x2="50" y1="0" y2="100" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
   &lt;line x1="0" x2="100" y1="50" y2="50" stroke="black" stroke-width="1"&gt;&lt;/line&gt;
  &lt;/svg&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h1>Expected result</h1>
  
  <p>Both rectangles (left and right) should be rotating in the center of each svg (the point of the intersection of two black lines).</p>
  
  <h1>How to resolve this problem or is it deep bug in Firefox browser?</h1>