Why does a rect require width and height attribute

Question

In the following example I created a blinking eyes animation using CSS and an SVG: http://codepen.io/JamesTheHacker/pen/oLZVrY

It works fine in chrome, but on Firefox the eyes do not appear unless I specifically provide a width and height attribute on the <rect>.

Without the attribute the eyes are not visible. If I add the attribute the CSS height animation has no effect.

Answer 1

• In SVG 1.1 height and width are attributes i.e. you can't set the height and width via CSS.
• In SVG 2 it is proposed width and height should be CSS properties.

Only Chrome has so far implemented this part of the unfinished SVG 2 specification.

Answer 2

You have already an excellent answer indicating what the problem is

You can solve it this way

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