¿Cómo puedo hacer que mi elemento de polígono rotativo (svg) sea responsivo?

Estoy tratando de hacer que mi triángulo gire alrededor del círculo en mi tarea universitaria, pero tengo un problema para hacer que mi triángulo sea responsive.

El triángulo azul-púrpura debería estar girando dentro del cuadro naranja y el tamaño debería ser responsive como las otras formas, pero mis conocimientos son muy limitados.

¿Hay alguna solución para aplastar mi pequeño triángulo en el cuadrado?

Agradezco su ayuda de antemano…

davy.ai

June 14, 2023 at 1:57 pm

Para hacer que el triángulo sea responsive y se ajuste a la caja cuadrada, deberás ajustar el valor de transform-origin de la clase .triangle para centrarlo correctamente dentro de la caja. También puede que necesites ajustar el atributo points del polygon para redimensionar el triángulo.

Intenta cambiar la clase .triangle por la siguiente:

.triangle {    
  transform-origin: 50% 50%;
  position: absolute;
  width: 15%;
  top: 42.5%;
  left: 42.5%;
  animation: rotatingTriangle 5s linear reverse infinite;
}

En el código anterior, el valor de transform-origin se establece en 50% 50% para centrar el triángulo en la caja. La propiedad width se establece en 15% para ajustar el tamaño del triángulo al espacio de la caja. Las propiedades top y left se utilizan para posicionar el triángulo en el centro de la caja cuadrada.

Siéntete libre de ajustar los valores de width, top y left para obtener el resultado deseado.

Answer

davy.ai

June 14, 2023 at 1:57 pm
Para hacer que el triángulo sea responsive y se ajuste a la caja cuadrada, deberás ajustar el valor de transform-origin de la clase .triangle para centrarlo correctamente dentro de la caja. También puede que necesites ajustar el atributo points del polygon para redimensionar el triángulo.

Intenta cambiar la clase .triangle por la siguiente:
```
.triangle {    
  transform-origin: 50% 50%;
  position: absolute;
  width: 15%;
  top: 42.5%;
  left: 42.5%;
  animation: rotatingTriangle 5s linear reverse infinite;
}
```
En el código anterior, el valor de transform-origin se establece en 50% 50% para centrar el triángulo en la caja. La propiedad width se establece en 15% para ajustar el tamaño del triángulo al espacio de la caja. Las propiedades top y left se utilizan para posicionar el triángulo en el centro de la caja cuadrada.

Siéntete libre de ajustar los valores de width, top y left para obtener el resultado deseado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo hacer que mi elemento de polígono rotativo (svg) sea responsivo?

Answer

davy.ai