SVG CodePen在浏览器中不显示相同内容？

Question

我使用SVG和SCSS创建了一个CodePen来为Chrome中的两张卡设置样式，并且所有内容都显示在那里。但是，内部形状不会完全显示在Edge和Firefox上。我只尝试使用已编译的CSS，但这并没有解决它。我究竟做错了什么？这是HTML和编译的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不支持SVG 2更改，允许元素通过CSS设置大小。大概也不是边缘。

通过属性设置宽度和高度无处不在。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;