Necesito renderizar un elemento de un SVG a una imagen. Tiene que ser como aparece en el SVG, sin más transformaciones.
La única forma que se me ocurre para lograr esto es establecer el cuadro de vista del SVG en el elemento de destino. Para hacer esto, necesito calcular el cuadro delimitador del elemento en relación con el viewBox SVG.
Intenté usar getBBox() , pero no creo que funcione. Sus coordenadas son relativas al elemento transformado: las transformaciones del elemento y sus padres no se aplican. No es posible aplicar esas transformaciones al bbox ya que es posible que el bbox transformado ya no contenga el objeto: por ejemplo, piense qué sucedería si el bbox necesita rotar 45 grados.
Una alternativa podría ser getBoundingClientRect() . Sin embargo, representa el cuadro delimitador del elemento en relación con las coordenadas de la pantalla y, nuevamente, puede que no sea suficiente aplicar las transformaciones de la pantalla a la ventana gráfica SVG, ya que podrían transformar el cuadro delimitador de una manera que lo rompe.
La última idea que tengo es crear un nuevo elemento <svg> (sin transformación), colocar en él uno (o más) <g> cuya función es aplicar toda la transformación del viewBox del SVG original al elemento de destino, luego coloque (una copia de) el elemento de destino en él y, finalmente, llame a getBBox() en el elemento SVG recién creado: si no me equivoco, el bbox resultante debería ser lo que necesito y puedo configurarlo como viewBox del original SVG. Aunque podría no funcionar si el elemento de destino contiene algunos elementos <use> o cosas similares. Creo que tomará bastante tiempo implementar esto y me temo que será una pérdida de tiempo ya que no funcionará por alguna razón.
¿Hay otras formas de obtener el cuadro delimitador de un elemento en relación con el viewBox SVG? De lo contrario, ¿otras formas de representar correctamente un elemento de un SVG a una imagen?