Estoy tratando de mostrar e inmediatamente animar una rotación de un elemento SVG usando una transición CSS.
const node = getSVGElement(); // Has 'transform' set to 'rotate(0)' node.classList.add('svg-animation'); const parent = document.getElementById('someDiv'); parent.appendChild(node); setTimeout(() => { node.setAttribute('transform', `rotate(${someOtherValue})`); } }, 50);Y en CSS:
.svg-animation { transition: transform 0.5s ease-in-out; }Esto funciona según lo previsto en Chrome, pero Firefox y Safari muestran el elemento sin animarlo en absoluto. ¿Hay una sintaxis (o método) diferente que deba usarse para que funcione en estos navegadores (no me importa IE)?
En lugar de setAttribute intente una transformación css; Recuerde especificar las unidades.
node.style.transitionDuration = '1s'; let rotation_angle_deg = 10 node.style.transform = 'rotate('+rotation_angle_deg+'deg)'; Solo probé esto en Safari 15.5 pero funciona allí y puedo confirmar que setAttribute ignora cualquier transition-duration
Aquí tienes dos formas diferentes de resolver el problema. Primero usando JavaScript y segundo usando SMIL. De su ejemplo de código, no está claro cuál es el problema, pero asegúrese de que el DOM esté cargado antes de encontrar el elemento y luego use la propiedad de estilo en el elemento en lugar de establecer el atributo.
Qué solución elegir depende de usted. Yo diría que depende del contexto.
var someOtherValue = 90; document.addEventListener('DOMContentLoaded', e => { const node = document.querySelector('rect'); node.classList.add('svg-animation'); setTimeout(() => { node.style.transform = `rotate(${someOtherValue}deg)`; }, 500); }); .svg-animation { transition: 1s ease-in-out; } <svg viewBox="0 0 100 100" width="200"> <g transform="translate(50 50)"> <rect x="-20" y="-20" width="40" height="40" fill="navy"/> </g> </svg> <svg viewBox="0 0 100 100" width="200"> <g transform="translate(50 50)"> <rect x="-20" y="-20" width="40" height="40" fill="navy"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="90" calcMode="spline" keyTimes="0;1" keySplines=".5 0 .5 1" begin="1s" dur="1s" fill="freeze"/> </rect> </g> </svg>