Centrar programáticamente svg path

alignment centering

Question

Estoy trabajando en un script PHP que genera un fondo de pantalla jpg desde un archivo SVG de acuerdo con la resolución de pantalla del visitante. El fondo de pantalla consiste en un fondo de degradado circular (rectángulo) y un camino en la parte superior. ¿Cómo haría para centrar el camino horizontal y verticalmente en el rectángulo? Recuerde que el tamaño y las proporciones del rectángulo no son una constante. ¿Debo separar el fondo y la ruta a diferentes archivos svg o hay una manera fácil de centrar caminos? Tal vez un marco?

Answer 1

El cuadro delimitador svgElement.getBBox () puede ayudar.

Answer 2

Si conoce las coordenadas de las rutas, puede tomar el total de las coordenadas x / y y dividir por el número de coordenadas, esto le dará la posición promedio para el conjunto de coordenadas. A continuación, desplace cada coordenada con las coordenadas de la mitad del ancho / alto del cuadrado, más cualquier desplazamiento, menos la diferencia entre el centro del conjunto de coordenadas y la mitad del ancho / alto del cuadrado.

Esto debería dar como resultado que sus coordenadas estén centradas dentro del cuadrado, creo (es bastante temprano aquí, y acabo de comenzar mi primer café, así que podría estar equivocado). Por supuesto, esto supone que conoce todas las variables en juego (el ancho / alto del cuadrado, cualquier desplazamiento aplicado y las coordenadas de la ruta).

Answer 3

Esto se logra fácilmente mediante el uso de elementos <svg> anidados y el atributo preserveAspectRatio . Pon tu fondo en el svg externo y tu camino en el interno.

      <?xml version="1.0" encoding="UTF-8"?>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    
        <rect id="background" width="100%" height="100%" fill="grey"/>

        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%">
          <g>
            <circle cx="15" cy="20" r="10" fill="yellow"/>
            <circle cx="12" cy="17" r="1.5" fill="black"/>
            <circle cx="18" cy="17" r="1.5" fill="black"/>
            <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/>
          </g>
        </svg>
    
      </svg>

Ejecute este fragmento e intente cambiar el tamaño de la ventana.

Para que esto funcione, todo lo que necesita asegurarse es que el atributo viewBox en el elemento interno <svg> esté correctamente configurado.