css - ejemplos - input range javascript
¿Por qué un rect requiere un atributo de ancho y alto en Firefox? (2)
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>
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.
- 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.