title: Rect x and y properties not working in Firefox
body: <p>I'm working with svgs and I have two "rect" elements. They have four css properties of width, height, x and y. It works fine on Chrome and Safari, but on Firefox the x and y properties don't show up. When I manually added them inside of the inspector there is a triangle with an exclamation point next to the x and y properties, which means it's not valid. I'm surprised by this because when I go to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect" rel="nofollow">Mozilla</a> developer website I can see that these are valid properties. Since the x and y are not valid according to the Firefox browser it's causing my SVG to not render. I'm not sure what I'm doing wrong. What is the workaround?</p>
  
  <pre><code>&lt;button
     class="button button--plusButton"
     data-ng-click="plus.toggleState()"
     data-ng-class="{'is-checked':plus.state}"&gt;
     &lt;svg viewBox="-7 9 24 24" xml:space="preserve"&gt;
        &lt;rect class="plusButton-topBar"/&gt;
        &lt;rect class="plusButton-bottomBar"/&gt;
     &lt;/svg&gt;
  &lt;/button&gt;
  
  .plusButton-topBar {
     x: 4px;
     y: 16.5px;
     width: 2px;
     height: 9px;
  }
  
  .plusButton-bottomBar {
     x: 0.5px;
     y: 20px;
     width: 9px;
     height: 2px;
  }
  
  .plusButton-topBar, .plusButton-bottomBar {
     fill: #656c75;
     -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
     transform: matrix(1, 0, 0, 1, 0, 0);
     transition: all 0.218s ease;
  }
  </code></pre>