Tengo una animación SVG que funciona bien en todos los navegadores. Pero, cuando se hace zoom en Safari, la animación se rompe. Parece que la animación está sangrando por los bordes derecho e inferior.

Y esto solo sucede cuando el SVG está en una etiqueta img . Si el SVG se usa en línea, no hay problema como tal.

Cuando la página se amplía al 125% en macOS Safari, obtendrá,

Al principio, parecía un problema con mi pantalla o con mis preferencias personales configuradas en mi navegador. Pero este es un problema real que también podría reproducir en otras máquinas y también con otros SVG animados. Por ejemplo, abra https://loading.io/spinner o http://samherbert.net/svg-loaders/ en macOS Safari con un nivel de zoom distinto al 100 %, ya que verá el mismo comportamiento.

Fragmento (guarde este SVG como una imagen .svg y utilícelo en una etiqueta img para reproducir este comportamiento)

 <svg width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" /> <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"> <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite" /> </path> </svg>