Estoy hablando de la imagen en la segunda sección del enlace en esta página HTML. y aquí está el enlace de la imagen original.
cuando inspecciona la página HTML, puede ver que estoy usando la misma imagen que el enlace dado, y aún así, la mano en la imagen no se muestra, traté de cambiar el tamaño y todo en la inspección para que la mano en la imagen se convierta en visible pero no funciona. Pensé que era un problema del índice z, pero verifiqué que todo el índice z está bien, la parte del borde de la mano es visible.
Acabo de ver con diferentes navegadores Mac y Safari que la imagen se muestra con la mano, pero en mi sistema, Linux y el navegador Chrome, la imagen se muestra sin la mano.
<div class="col-lg-4 is-animated"> <img src="assets/images/2sec.svg" class="img-fluid" alt=""> </div>Intente usar la etiqueta <object> :
<object type="image/svg+xml" data="https://www.thealphateam.digital/demos/pando/assets/images/2sec.svg">@Progu, gracias por su respuesta, su respuesta estaba funcionando pero comencé a enfrentar otro problema con mi código javascript, el desplazamiento dejó de funcionar cuando usé una etiqueta de objeto para mostrar la imagen...
así que busqué más alternativas para mostrar imágenes además de una etiqueta de imagen, y encontré el método Iframe, funcionó de maravilla. pero aún así, si alguien sabe por qué sucedió esto y puede mostrarlo con la etiqueta de la imagen, puede responder.
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox"> <p>iframes are not supported by your browser.</p> </iframe><br />Cambie el valor del margen izquierdo del estilo de estilo en línea.
<iframe frameborder="0" scrolling="no" width="100%" height="100%" src="assets/images/2sec.svg" name="imgbox" id="imgbox" style="margin-left: 256px;">Y también el svg width="100%" y height="auto"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="auto" viewBox="0 0 540 471" fill="none">