SVG CodePen 跨浏览器显示不一样？答案

【问题标题】：SVG CodePen not displaying same across browsers?SVG CodePen 跨浏览器显示不一样？
【发布时间】：2018-02-18 05:31:04
【问题描述】：

我创建了一个CodePen，使用 SVG 和 SCSS 在 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>

【问题讨论】：

等等，不同的浏览器呈现不同的东西？我退出了......只是在开玩笑，但在规范的功能和解释方面存在已知差异。请参阅this article for instance、or this one、or even this older by still relevant study。这很糟糕，但这就是生活。
我只是觉得奇怪的是，这一切只能在 Chrome 中正确呈现。您可能会认为我的特定代码并非如此。

标签： html svg sass

【解决方案1】：

Firefox 不支持允许元素通过 CSS 设置大小的 SVG 2 更改。大概Edge也没有。

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

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

【讨论】：