London804 London804 - 5 months ago 19
CSS Question

Rect x and y properties not working in Firefox

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 Mozilla 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?

<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect class="plusButton-topBar"/>
<rect class="plusButton-bottomBar"/>
</svg>
</button>

.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;
}

Answer

You have 2 issues here.

  1. X and Y are not valid css properties.
    • Move them to inline attributes.
  2. Your SVG element needs dimensions.
    • Add height and width.

button svg { /*add dimensions*/
  height: 20px; 
  width: 20px;
}
.plusButton-topBar {
 /*x: 4px;
   y: 16.5px;  Move these */
   width: 2px;
   height: 9px;
}

.plusButton-bottomBar {
 /*x: 0.5px;
   y: 20px;  and these*/
   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;
}
<button class="button button--plusButton" data-ng-click="plus.toggleState()" data-ng-class="{'is-checked':plus.state}">
  <svg viewBox="-7 9 24 24" xml:space="preserve">
    <rect x="4" y="16.5" width="2" height="9" class="plusButton-topBar" />
    <rect x="0.5" y="20" width="9" height="2" class="plusButton-bottomBar" />
  </svg>
</button>


Just a thought...

You could use text rather than svg.

button{
  color:#656c75;
  font: 1.5em "arial";
  }
<button
   class="button button--plusButton"
   data-ng-click="plus.toggleState()"
   data-ng-class="{'is-checked':plus.state}">
 +
</button>