为什么在 Firefox 中矩形需要 width 和 height 属性？答案

【问题标题】：Why does a rect require width and height attribute in Firefox?为什么在 Firefox 中矩形需要 width 和 height 属性？
【发布时间】：2016-11-03 12:01:31
【问题描述】：

在以下示例中，我使用 CSS 和 SVG 创建了眨眼动画：http://codepen.io/JamesTheHacker/pen/oLZVrY

它在 chrome 中运行良好，但在 Firefox 上，除非我在 <rect> 上特别提供宽度和高度属性，否则眼睛不会出现。

没有属性眼睛是不可见的。如果我添加属性 CSS height 动画无效。

【问题讨论】：

标签： css svg css-transitions

【解决方案1】：

在 SVG 1.1 中，高度和宽度是属性，即不能通过 CSS 设置高度和宽度。
在 SVG 2 中，建议宽度和高度应为 CSS 属性。

到目前为止，只有 Chrome 实现了未完成的 SVG 2 规范的这一部分。

【讨论】：

【解决方案2】：

你已经有一个很好的答案来说明问题所在

你可以这样解决

* { box-sizing: border-box; }
body { background-color: rgb(0, 184, 234); }

svg {
  display: block;
  margin: 90px auto;
  width: 380px;
  height: 130px;
}

/*
 * Keyframes for blink animation
 */
@keyframes blink {
  0% { transform: scaleY(1); }
  40% { transform: scaleY(0); }
  80% { transform: scaleY(1); }
}

.eye {
  height: 20px;
  width: 20px;
  animation-name: blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform-origin: center 315px;
}

<svg>
<g transform="translate(-108.75 -258.41)">
	<path id="specs" fill="#FFF" d="M328.911,258.412v10.29h-19.127v16.192h-19.16v16.249h19.287v-16.191h19v62.169h19.432
		v-68.736h123.995v68.761h19.432v-88.709l-18.047,0.001v-0.025h-125.38H328.911z M124.069,258.454v0.001h-15.321v88.709h19.427
		v-68.733h123.996l0.008,68.757h19.423v-62.401h19.032v-16.25h-19.032v-10.053h-18.047v-0.026H124.072L124.069,258.454z
		 M348.294,347.163v17.488h19.4v19.951h85.141v-19.976h-85.109v-17.464H348.294L348.294,347.163z M452.819,347.171v17.439h19.431
		v-17.439H452.819z M128.133,347.203v17.487h19.398v19.951h85.149l-0.008-19.975h-85.117l0.001-17.464h-19.427H128.133z
		 M232.658,347.212v17.439h19.423v-17.439H232.658z"/>
	<g id="eyes">
		<rect class="eye" x="181.759" y="305.026" width="20" height="20" fill="#FFF" />
		<rect class="eye" x="402.759" y="305.026" width="20" height="20"  fill="#FFF" />
	</g>
</g>
</svg>

【讨论】：

为什么将持续时间改为1s？这会导致它每秒闪烁一次，还是你为了测试而改变了它？
我只是为了测试而改变了它，主要的变化是使用比例变换而不是高度变化