Rect x and y properties not working in Firefox - css

Question

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 1

You have 2 issues here.
X and Y are not valid css properties.
Move them to inline attributes.
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>

Answer 2

Just a two guesses:
First, I think x and y aren't CSS properties but HTML attributes, so
you should include them inline in HTML tags.
Second, your CSS rules aren't wrapped by tag (I guess it's
just because you pasted two different parts of file here but just
making sure)

Answer 3

for modifying the x and y for a svg element via CSS, you can use
transform: translate(x,y) //to modify x and y axis
transform: translateX(x) //to modify only x axis
transform: translateY(y) //to modify only y axis