¿Es posible activar la función de atributo de presentación SVG incorporada en la web regular?

Estoy raspando una página con diagramas. Hay un oyente de eventos que detecta la posición del cursor en el diagrama y según eso genera algunos datos y sobrescribe un elemento div. He notado que hay una función de js que acepta x,y cordones como un argumento - ratio transform="translate(x,y)"

Intenté editar esto a través del elemento. setAttribute pero finalmente no funcionó. Cambió el valor visualmente y eso es todo, la función no activaba. ¿Hay otra manera de hacer esto?

Pregunta hecha hace 3 años, 4 meses, 29 días - Por debugduke

2 Respuestas:

  • Sí, es posible activar la función de atributo de presentación SVG incorporada en la web regular. Sin embargo, en el caso específico que mencionas, puede ser necesario aplicar un enfoque diferente para lograr el resultado deseado.

    Si intentaste editar el valor del atributo 'transform' a través del método setAttribute y no funcionó como esperabas, puede ser necesario utilizar una técnica diferente.

    Una opción que podrías probar es manipular directamente la propiedad 'transform' del elemento SVG en lugar de hacerlo a través de setAttribute. Puedes acceder al elemento seleccionando el elemento SVG con querySelector o getElementById, y luego modificando directamente su propiedad 'transform' de la siguiente manera:

    javascript
// Seleccionar el elemento SVG
var highchartsTooltip = document.querySelector('.highcharts-tooltip');

// Modificar la propiedad 'transform' directamente
highchartsTooltip.transform.baseVal.initialize(highchartsTooltip.transform.baseVal.createSVGTransformFromMatrix(highchartsTooltip.getCTM().translate(newX, newY)));

    En este código, 'newX' y 'newY' serían las nuevas coordenadas x e y que deseas establecer en la transformación del elemento.

    Al modificar directamente la propiedad 'transform' de esta manera, es posible que logres activar la función correctamente. Recuerda también tener en cuenta que algunos eventos de actualización o redibujado pueden ser necesarios para que los cambios surtan efecto visualmente en el diagrama.

    ¡Espero que esta sugerencia te sea útil para resolver la situación que estás enfrentando!

    Respondida el Dec 17, 2020 a las 20:15 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Sí, es posible activar la función de atributo de presentación SVG incorporada en la web normal. Aquí tienes cómo hacerlo:

    • Utiliza la API de Web Animations: La API de Web Animations te permite animar propiedades CSS, incluyendo transformaciones SVG. Puedes utilizar esta API para animar el atributo `transform` del elemento SVG.

    javascript
   // Crea una animación para traducir el elemento SVG
   const animation = element.animate([
     { transform: 'translate(0, 0)' },
     { transform: 'translate(100, 100)' }
   ], {
     duration: 1000, // Duración de la animación en milisegundos
     fill: 'forwards' // Mantiene la transformación final después de la animación
   });
    


    // Inicia la animación
   animation.play();

    • Utiliza `SVGMatrix`: `SVGMatrix` es una interfaz que representa una transformación matricial 2D. Puedes utilizarla para crear una transformación personalizada y aplicarla al elemento SVG.

    javascript
   // Crea una transformación de traslación
   const matrix = new SVGMatrix();
   matrix.translate(100, 100);
    


    // Aplica la transformación al elemento SVG
   element.setAttribute('transform', matrix.toString());

    • Utiliza `setTransform`: `setTransform` es un método del objeto `SVGElement` que te permite establecer la transformación del elemento directamente.

    javascript
   // Establece la transformación de traslación
   element.setTransform(100, 0, 0, 1, 0, 100);

    Ten en cuenta que el uso de setAttribute para cambiar el atributo transform no activará la función de presentación SVG. Debes utilizar uno de los métodos descritos anteriormente para activar la función.

    Respondida el Dec 17, 2020 a las 20:18 - por Gemini

    Votos positivos: 0 | Votos negativos: 0