Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

223
Vistas
Rotar elemento de imagen SVG usando d3

Me gustaría rotar una imagen dentro de un elemento SVG usando d3.js

Esta es la estructura de los elementos: estructura

Buscando alrededor parecía que esto podría ser una tarea fácil. Lo primero que intenté fue editar como HTML el elemento de la imagen e insertar el atributo transform="rotate(90)" , sin embargo, la imagen desapareció, incluso eliminando este atributo no pude recuperar la imagen original.

Lo que debo hacer es rotar el elemento de la imagen como siempre estuvo en posición vertical. Con eso quiero decir que si obtengo una imagen que tiene una orientación de 90 grados en el sentido de las agujas del reloj, quiero rotar 90 grados en el sentido contrario a las agujas del reloj. Si obtengo una imagen con una orientación de 270 grados, necesito girarla 270 grados en sentido contrario a las agujas del reloj, y así sucesivamente.

Obtuve del back-end este valor de orientación, por lo que necesitaría una función para actualizar la rotación de la imagen, pero incluso esta rotación básica de la imagen en el navegador no funcionó, no sé lo que se supone que hacer.

Ni siquiera estoy seguro de si debo rotar el elemento de la imagen o el SVG mismo... O incluso el contenedor del SVG (en la captura de pantalla, el div con la clase svg-container ).

Otra cosa que probé es usar una clase css pero la imagen estaba recortada. Las clases que utilicé son las de esta respuesta (intenté con la imagen y sus contenedores).

Cualquier ayuda es muy apreciada, gracias

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Diferencias a descubrir entre el atributo SVG y el estilo CSS:

  • unidad: el atributo svg no necesita especificar la unidad, mientras que el estilo css debe especificar una unidad.
     <- svg -> <svg> <imgage transform="translate(100, 100) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"
  • el estilo css tiene un origen de transformación y el valor predeterminado es el centro del elemento
     <- html: the default transform-origin to be: (50px, 50px) -> <img width="100" height="100" style="rotate(90deg);" src="url or base64" /> <- svg need first translate to the center then rotate -> <svg> <imgage width="100" height="100" transform="translate(50, 50) rotate(90)" href="url or base64" /> </svg> <- html -> <img style="transform:translate(100px, 100px) rotate(90deg);" src="url or base64"

Esperando que mi comentario pueda ayudar.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda