css - ejemplos - input range javascript

¿Por qué un rect requiere un atributo de ancho y alto en Firefox?

Question

En el siguiente ejemplo, creé una animación de ojos parpadeantes usando CSS y un SVG: http://codepen.io/JamesTheHacker/pen/oLZVrY

Funciona bien en Chrome, pero en Firefox los ojos no aparecen a menos que proporcione específicamente un atributo de ancho y alto en <rect> .

Sin el atributo, los ojos no son visibles. Si agrego el atributo, la animación de height CSS no tiene ningún efecto.

Answer 1

Ya tienes una respuesta excelente que indica cuál es el problema

Puedes resolverlo de esta manera

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

Answer 2

• En SVG 1.1, la altura y el ancho son atributos, es decir, no se puede establecer el alto y el ancho a través de CSS.
• En SVG 2, se propone que el ancho y la altura sean propiedades de CSS.

Solo Chrome implementó hasta ahora esta parte de la especificación SVG 2 sin terminar.