SVG CodePen not displaying same across browsers? - html

Question

I created a CodePen using SVG and SCSS to style two cards in Chrome, and everything displays properly there. However, The internal shapes won't fully display on Edge and Firefox. I tried only using the compiled CSS, but that doesn't fix it. What am I doing wrong? Here is the HTML and compiled CSS:
.svgcontainer {
width: 100px;
height: 140px;
border: 1px solid;
border-radius: 10%;
}
#card1 {
background: lime;
}
.rect1 {
fill: red;
width: 50px;
height: 50px;
}
.poly1 {
fill: #fca456;
}
#card2 {
background: #cd1bc9;
}
.rect2 {
fill: silver;
width: 25px;
height: 140px;
}
.ellipse2 {
fill: green;
}
.polygon2 {
fill: #fa4567;
}
.bigshape2 {
width: 100px;
height: 140px;
}
<svg id="card1" class="svgcontainer">
<defs>
<pattern id="shape-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect1" x="0" y="0" rx="10" ry="10" />
<polygon class="poly1" points="25,15 30,20 25,25 20,20" />
</pattern>
</defs>
<!-- use pattern in a circle -->
<circle class="large-shape" cx="50" cy="70" r="75" fill="url(#shape-pattern)" />
</svg>
<svg id="card2" class="svgcontainer">
<defs>
<pattern id="internal-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect2" x="12" y="0" />
<ellipse class="ellipse2" cx="25" cy="22" rx="10" ry="18" />
<polygon class="polygon2" points="20,10 30,10 25,40" />
</pattern>
</defs>
<rect class="bigshape2" x="0" y="0"
fill="url(#internal-pattern)" />
</svg>

Answer 1

Firefox does not support the SVG 2 change which allows elements to have sizing set via CSS. Presumably neither does Edge.
Setting width and height via attributes works everywhere.
.svgcontainer {
width: 100px;
height: 140px;
border: 1px solid;
border-radius: 10%;
}
#card1 {
background: lime;
}
.rect1 {
fill: red;
}
.poly1 {
fill: #fca456;
}
#card2 {
background: #cd1bc9;
}
.rect2 {
fill: silver;
}
.ellipse2 {
fill: green;
}
.polygon2 {
fill: #fa4567;
}
<svg id="card1" class="svgcontainer">
<defs>
<pattern id="shape-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect1" x="0" y="0" width="50" height="50" rx="10" ry="10" />
<polygon class="poly1" points="25,15 30,20 25,25 20,20" />
</pattern>
</defs>
<!-- use pattern in a circle -->
<circle class="large-shape" cx="50" cy="70" r="75" fill="url(#shape-pattern)" />
</svg>
<svg id="card2" class="svgcontainer">
<defs>
<pattern id="internal-pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
<rect class="rect2" x="12" y="0" width="25" height="140" />
<ellipse class="ellipse2" cx="25" cy="22" rx="10" ry="18" />
<polygon class="polygon2" points="20,10 30,10 25,40" />
</pattern>
</defs>
<rect class="bigshape2" x="0" y="0" width="100" height="140"
fill="url(#internal-pattern)" />
</svg>