La imagen SVG no se muestra correctamente en IE11

Un usuario preguntó 👇

Hola, el plugin funciona muy bien en Chrome, Safari, iOS y FireFox para mostrar mi logotipo SVG en mi sitio … excepto Internet Explorer 11 donde el SVG / logotipo está muy distorsionado en IE 11. No soy un gran desarrollador, pero Si hay una «solución» técnica de nivel medio a bajo, ¿podría pasar?

(@benbodhi)

Hace 3 años, 2 meses

Hola,

Gracias por tu apoyo. Me alegro de que te guste el plugin. No trabajo con un explorador de Internet … ¿la gente todavía lo usa? 😜 Realmente no tengo una computadora. Puedo probar su sitio para ver lo que necesita hacer pronto. Pero probablemente sea solo una pregunta de la SEC.

Si no puede resolverlo, me veré feliz cuando tenga acceso a una máquina con Windows. En este caso, necesitaría un enlace a la página para poder ver con qué estamos trabajando.

(@ greg-d1)

Hace 3 años, 1 mes

En primer lugar: ¡GRACIAS a BenBodhi por el gran plugin!

@ sfisher777: Esto no es una falla del plugin, un error de IE11 realmente conocido. IE11 normalmente solo mostrará un documento SVG en el tamaño ‘predeterminado’, que es de 150 px de alto y hasta 300 px de ancho. Sin embargo, una imagen SVG no debe distorsionarse a menos que tenga alguna animación, que IE11 tampoco puede manejar. Mi configuración más simple hasta ahora es detectar IE11 y hacer que JS asigne una clase de cuerpo, como ‘ie11’. Puedes obtener un fragmento Aquí

En realidad, aquí está: es solo una pequeña parte de jQuery.

jQuery(window).load(function() {
      if(navigator.userAgent.match(/Trident.*rv:11./)) {
         jQuery('body').addClass('ie11');
     }

Debe agregar esto a los js ‘principales’ de su tema, y ​​no puedo ayudarlo, porque esto varía de un tema a otro.

Luego, en la hoja de estilo del tema, debe agregar algo de CSS que solo se centrará en los casos ‘condenados’ para las imágenes y el navegador infractor (IE11), y brindarles la atención que necesita para brindarles (si la altura) no está confirmada , IE11 predeterminado a 150px). Su SEC debería verse así:

body.ie11 .your-class { 
   height: 400px;
   width: 100%;
   }

Puedes jugar con la altura hasta encontrar lo que necesitas. Si esto no soluciona su problema y su imagen está ‘muy distorsionada’, y no debido a la animación incorporada, es posible que tenga algunas otras cosas en juego.

Espero que esto ayude.

Salud,

Greg

(@benbodhi)

Hace 3 años, 1 mes

Hola @ greg-d1,

¡Gracias por tomarse su tiempo para dejar algunas instrucciones muy útiles! Últimamente he estado agregando y arreglando funciones del plugin, así que probaré esto y veré si puedo encontrar algo en la próxima versión. Si no lo hago, al menos esto está aquí. Muchas gracias 🙂

¿Solucionó tu problema??

SíNo

0 / 0