javascript - property - Obtener dimensión de un camino en SVG

svg text

Question

Necesito obtener la dimensión en la pantalla de una <ruta> en un SVG desde JavaScript.

No tengo ninguna "transformación" o "escalado" (transformación, escala) en mi SVG. Lo único que se cambió es el viewBox, que cambiará el tamaño de todos los elementos en el SVG.

He estado usando myPath.getBBox (), el ancho devuelto permanece igual aunque cambie mi viewBox.

Así que me pregunto cuál es la relación con este viewBox y el tamaño de una ruta. Tal vez hay una función para calcular el ancho?

Answer 1

En primer lugar, tenga en cuenta que el path no puede tener un ancho. Es un conjunto de cuerdas. El navegador utiliza esa información junto con el método de dibujo para conectar las cuerdas y crear una forma visible.

En segundo lugar, el cuadro delimitador es una instantánea de cuándo se representó el SVG. Es por eso que no se obtiene el ancho actualizado en el tamaño.

Una solución que supongo sería obtener el ancho del elemento de conatiner para el SVG ( div o algo más).

Tal vez algunas de las libraries pueden proporcionar algún método de utilidad para resolver esto.

Answer 2

Puede llamar getBoundingClientRect() método getBoundingClientRect() en su ruta para obtener dimensiones. ClientRect un objeto ClientRect :

var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;

También hay un método getScreenCTM() , que devuelve la matriz de transformación en los píxeles de la pantalla actual del elemento al que se llamó. la especificación says :

[getScreenCTM ()] Devuelve la matriz de transformación de las unidades de usuario actuales (es decir, después de la aplicación del atributo ''transformar'', si corresponde) al aviso de un "píxel" del agente de usuario principal. [...] Tenga en cuenta que se devuelve un valor nulo si este elemento no está conectado al árbol de documentos.